How to embed fonts in HTML?

Asked 20/10, 2008 at 22:57 Answered 27/12, 2009 at 22:29

Solved javascript html flash fonts embed

I'm trying to figure out a decent solution (especially from the SEO side) for embedding fonts in web pages. So far I have seen the W3C solution, which doesn't even work on Firefox, and this pretty cool solution. The second solution is for titles only. Is there a solution available for full text? I'm tired of the standard fonts for web pages.

Thanks!

Underdeveloped answered 20/10, 2008 at 22:57 Comment(5)

X-Ref How to add some non-standard font to a website? – Grettagreuze 8/7, 2013 at 7:51

possible duplicate of Fonts on the Web – Hodson 31/10, 2014 at 19:38

@Hodson This question has a better answer. I've closed the other one as a duplicate of this. – Sanfred 31/10, 2014 at 20:27

Any updated answers on this question? All of the answers are more than half a decade old. Also, I couldn't find a reference on MDN if anyone knows. – Avruch 19/5, 2020 at 20:48

Please provide an updated answer and help the World. I haven’t done HTML since 2011 myself – Underdeveloped 19/5, 2020 at 21:15

144

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.

Carolus answered 27/12, 2009 at 22:27 Comment(10)

I think it is worthy to emphasize that you are not automatically allowed to take a font and @font-face-ize it even if you have bought a license of that font legally and for a lot of money. You need to check the font's license for whether that kind of electronic re-distribution is allowed or not. Infringements are so easy to detect and trawl for that there may easily be trouble otherwise, especially if you are a company situated in the right jurisdiction. – Drawing 27/12, 2009 at 22:34

FontSquirrel makes a clear point of this both on its pre-built font kits and in its generator (which requires you to verify that the fonts are actually licensed for such use). There are other conversion tools out there, but I don't know which ones make a point of discussing licensing. – Carolus 28/12, 2009 at 2:16

Fascinating stuff. Out of curiosity, how did you get to this post? There was more than one answer on the same day, and several comments on your answer. +1... – Underdeveloped 28/12, 2009 at 17:33

I don't remember how I ended up on it - search for HTML font perhaps, but I responded because I was working on just this for a client just before Christmas so the information was fresh. I assume Pekka saw it as new activity on an old post; I don't know if the system flags attempts to post multiple links (I know it blocked initially) but I figured it might be a case of "check this to be sure it's not someone spamming". – Carolus 28/12, 2009 at 21:5

@Drawing "infringements are so easy to detect and trawl for"... can you englighten me a bit, please... how would this detection and trawling be done, and under what circumstances would it happen? – Underdeveloped 21/2, 2012 at 0:7

It wouldn't be trivial to look at a site or page and determine whether it was infringing, but if you're a font designer I suspect you could search for the standard filename or font face name of your font and locate usages. – Carolus 22/2, 2012 at 3:1

@Carolus so they'd be relying on the name, filenames and other metadata to detect infringements? I realize this is all hypothetical. – Underdeveloped 22/8, 2012 at 23:27

That's my suspicion for automated searches - assuming that none of the search engines are actually indexing the actual copyright strings within the files themselves, it's probably filename and font name based. Of course, font-oriented people might look at the page and say "Hey, I know that font!" Since it's not just the filename, modifying the font file to change the names then using your tweaked file seems like stealing for the sake of stealing - if you're putting in that much effort, find a comparable free font elsewhere. It's like water-cooling Celerons, it's not for performance. – Carolus 30/8, 2012 at 15:53

@Carolus : Now I understand why mediawiki allow full style attribute but no style tags :-). – Hodson 31/10, 2014 at 20:33

The URL for the Font Squirrel @font-face generator has changed: https://www.fontsquirrel.com/tools/webfont-generator – Bathsheba 26/9, 2022 at 19:58

Try Facetype.js, you convert your .TTF font into a Javascript file. Full SEO compatible, supports FF, IE6 and Safari and degrades gracefully on other browsers.

Robby answered 15/2, 2009 at 11:22 Comment(3)

For those who wonder how it works, it uses the canvas tag (html 5) or VML. – Fussy 28/12, 2009 at 2:26

I would have to agree with this solution it looks extremely simple and seems to be working on every browser I throw at it. – Chunchung 8/6, 2010 at 11:9

This link is dead. – Paling 16/10, 2017 at 12:27

No, there isn't a decent solution for body type, unless you're willing to cater only to those with bleeding-edge browsers.

Microsoft has WEFT, their own proprietary font-embedding technology, but I haven't heard it talked about in years, and I know no one who uses it.

I get by with sIFR for display type (headlines, titles of blog posts, etc.) and using one of the less-worn-out web-safe fonts for body type (like Trebuchet MS). If you're bored with all the web-safe fonts, you're probably defining the term too narrowly — look at this matrix of stock fonts that ship with major OSes and chances are you'll be able to find a font cascade that will catch nearly all web users.

For instance: font-family: "Lucida Grande", "Verdana", sans-serif is a common font cascade; OS X comes with Lucida Grande, but those with Windows will get Verdana, a web-safe font with letters of similar size and shape to Lucida Grande. Linux users will also get Verdana if they've installed the web-safe fonts package that exists in most distros' package managers, or else they'll fall back to an ordinary sans-serif.

Vacuole answered 20/10, 2008 at 23:17 Comment(7)

Let me also stand on the soapbox for a minute: though I wish Windows had more "good" fonts (OS X has the greatest hits of typography history: Futura, Helvetica, Gill Sans, etc.), it's a good thing that we have to restrain ourselves when picking fonts. Freedom can be used for evil, too. – Vacuole 20/10, 2008 at 23:22

No comment on your comment, but thanks for the answer. That's great. Is there a list of cascades somewhere? Thanks again. – Underdeveloped 20/10, 2008 at 23:27

Here's one list: (ampsoft.net/webdesign-l/WindowsMacFonts.html). It's conservative, only listing fonts that are identical (or nearly so) across platforms. You might have to do a comparison to see which "safe" font is most like your "risky" font. – Vacuole 20/10, 2008 at 23:44

(Oh, also: always specify a general fallback — sans-serif, serif, or monospace. That way, it'll at least be in the ballpark, should the user have none of your requested fonts.) – Vacuole 20/10, 2008 at 23:44

Excellent. Thanks again. Although now that I think about it I can just steal the cascades from sites I like. – Underdeveloped 21/10, 2008 at 0:9

If by bleeding edge you mean Safari 3.1 -- which has been out for 6 or 7 months -- as well as Opera 9.2 (which i believe is when Opera added ttf support), then yes, bleeding edge is an appropriate description, but most people would not consider something to be bleeding edge many months after release – Apiculture 21/10, 2008 at 3:52

Most users that come to the sites I work on still use IE6 (those bastards) So from that point of view I consider the latest major versions to be bleeding edge. – Tittup 21/10, 2008 at 6:42

And it's unlikely too -- EOT is a fairly restrictive format that is supported only by IE. Both Safari 3.1 and Firefox 3.1 (well the current alpha) and possibly Opera 9.6 support true type font (ttf) embedding, and at least Safari supports SVG fonts through the same mechanism. A list apart had a good discussion about this a while back.

Apiculture answered 20/10, 2008 at 23:6 Comment(0)

Check out Typekit, a commercial option (they have a free package available too).

It uses different techniques depending on which browser is being used (@font-face vs. EOT format), and they take care of all the font licensing issues for you also. It supports everything down to IE6.

Here's some more info about how Typekit works:

Hottentot answered 27/12, 2009 at 22:29 Comment(0)

I asked this a while back. The answer is basically that it doesn't work. :(

Doxology answered 20/10, 2008 at 23:17 Comment(0)

Recommended topics

Hot tags