How to Embed Fonts in Html

How to embed fonts in HTML?

Things have changed since this question was originally asked and answered. There's been a large amount of work done on getting cross-browser font embedding for body text to work using @font-face embedding.

Paul Irish put together Bulletproof @font-face syntax combining attempts from multiple other people. If you actually go through the entire article (not just the top) it allows a single @font-face statement to cover IE, Firefox, Safari, Opera, Chrome and possibly others. Basically this can feed out OTF, EOT, SVG and WOFF in ways that don't break anything.

Snipped from his article:

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('Graublau Web Regular'), local('Graublau Web'),
    url("GraublauWeb.woff") format("woff"),
    url("GraublauWeb.otf") format("opentype"),
    url("GraublauWeb.svg#grablau") format("svg");
}

Working from that base, Font Squirrel put together a variety of useful tools including the @font-face Generator which allows you to upload a TTF or OTF file and get auto-converted font files for the other types, along with pre-built CSS and a demo HTML page. Font Squirrel also has Hundreds of @font-face kits.

Soma Design also put together the FontFriend Bookmarklet, which redefines fonts on a page on the fly so you can try things out. It includes drag-and-drop @font-face support in FireFox 3.6+.

More recently, Google has started to provide the Google Web Fonts, an assortment of fonts available under an Open Source license and served from Google's servers.

License Restrictions

Finally, WebFonts.info has put together a nice wiki'd list of Fonts available for @font-face embedding based on licenses. It doesn't claim to be an exhaustive list, but fonts on it should be available (possibly with conditions such as an attribution in the CSS file) for embedding/linking. It's important to read the licenses, because there are some limitations that aren't pushed forward obviously on the font downloads.

Is it possible to embed font files into html just like css?

Yes, that's actually possible. You can embed the font as a base64 encoded font like this:

@font-face{
    font-family: FontName;
    src: url(data:font/ttf;base64,THESTRING… ) format('truetype');
}

But it's not advisable as the base64 string can get rather big and cause performance issues.

How to embed font file in html?

This may work. Add this to your css file.

@font-face {
  font-family: 'Preeti';
  src: url('http://www.fontsaddict.com/fontface/preeti.TTF');
}

How to embed fonts from Apple Font Book

you can include font assets in your app by copying the font you have in your Font Book and having them in a folder such as /static/fonts. you can then include them as follows:

@font-face {
  font-family: <font name here>;
  src: url(<path-to-your-font>) format(<appropriate-font-format>);
}

div {
  font-family: <font name here>;
}

Note: Different browsers support different font filetypes. I recommend you check out the docs here for more info on that.

How do i embed a custom font in CSS?

You can embed a font quick and easy by using this code:

@font-face {
  font-family: 'Name';
  src: url('Font.ext');
  font-weight: 400;
  font-style: normal;
}

Where Font.ext should be replaced with your font file and its extention (file type) e.g.

src: url('Ubuntu-L.ttf');

And the following font-weight and font-style should be referencing the specific font choice.

How to embed a font in website

If I were doing it, I would take a look at how the Google Font API works…

How to add some non-standard font to a website?

This could be done via CSS:

<style type="text/css">
@font-face {
    font-family: "My Custom Font";
    src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont { 
    font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>

It is supported for all of the regular browsers if you use TrueType-Fonts (TTF), the Web Open Font Format (WOFF) or Embedded Opentype (EOT).

---

Related Topics