{"id":13,"date":"2009-09-20T00:04:13","date_gmt":"2009-09-20T04:04:13","guid":{"rendered":"http:\/\/www.useragentman.com\/blog\/?p=13"},"modified":"2019-01-31T13:26:46","modified_gmt":"2019-01-31T17:26:46","slug":"font-face-in-depth","status":"publish","type":"post","link":"http:\/\/www.useragentman.com\/blog\/2009\/09\/20\/font-face-in-depth\/","title":{"rendered":"@font-face in Depth"},"content":{"rendered":"<div class=\"importantNotes\">\n<h3>Updates<\/h3>\n<ul>\n<li><strong>(Aug 11, 2012):<\/strong> This article has been given a long overdue update to reflect the current state of browser support of @font-face.<\/li>\n<li><strong>(Oct 13, 2009):<\/strong> I have written a <a href=\"\/blog\/2009\/10\/09\/more-font-face-fun\/\">follow up article<\/a> which explores SVG fonts,<br \/>\n\tOpera 10 issues, and more<\/li>\n<li><strong>(Oct 28, 2010):<\/strong> This article has been translated into <a href=\"http:\/\/www.movavi.com\/opensource\/font-face-in-depth-be\">Belorussian<\/a> by <a href=\"http:\/\/www.movavi.com\/\">movavi<\/a>.<\/li>\n<\/ul>\n<\/div>\n<p><div id=\"attachment_28\" style=\"width: 250px\" class=\"wp-caption alignleft\"><a title=\"image Flickr page\" href=\"http:\/\/www.flickr.com\/photos\/martab\/1757415036\/\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-28\" class=\"size-full wp-image-28      \" title=\"image Flickr page\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2009\/09\/fontintro2.jpg\" alt=\"\" width=\"240\" height=\"180\" \/><\/a><p id=\"caption-attachment-28\" class=\"wp-caption-text\">Photo by marta.b (Source: Flickr)<\/p><\/div><\/p>\n<p>When I told one of my co-workers how excited I was that almost all the major browser vendors now supported font-embedding in their products, I got the same reaction from her that Bert from Sesame Street got when he told Ernie how <a title=\"Link to classic Sesame Street clip &quot;Bert's Bottlecaps&quot; via YouTube\" href=\"http:\/\/www.youtube.com\/watch?v=2Ls2vNfQxyc\">exciting he thought bottle cap collecting was<\/a> (yes, gratuitous ridicule was involved).  Now, while I can somewhat understand her disinterest (she is not a front-end web developer, but a Java programmer), I defend my enthusiasm by stating here that fonts are a really important part of web design, and the fact that we can now theoretically choose <strong>any<\/strong> font to embed inside our web pages and applications is something to celebrate.<\/p>\n<p>Sure, workarounds such as <a title=\"Mike Davidson article &quot;sIFR 2.0: Rich Accessible Typography for the Masses&quot;\" href=\"http:\/\/www.mikeindustries.com\/blog\/sifr\/\">sIFR<\/a> and <a title=\"Cuf\u00f3n homepage\" href=\"http:\/\/cufon.shoqolate.com\/generate\/\">Cuf\u00f3n<\/a> have existed for quite a while now, but they have drawbacks (they both are best used only for headings, and Cuf\u00f3n  doesn&#8217;t do well at allowing copying and pasting its content).  If you really want to embed fonts in your webpages, I believe that @font-face is the safest, future-proof option.<\/p>\n<h2>Why care about fonts?<\/h2>\n<p>My Java developer colleague may not understand why fonts are important, but she is a regular reader of  <a href=\"http:\/\/www.newyorker.com\/\">The New Yorker<\/a>.  Even though its website doesn&#8217;t use @font-face embedding (the standard New Yorker font is embedded in site using images), the developers of the site obviously know why fonts are important:<\/p>\n<ul>\n<li><strong>Fonts identify who the content belongs to.<\/strong> Just take a look at the content and without looking at the URL bar, you know exactly where you are &#8211; that font is highly integrated into that organization&#8217;s identity and branding.  Replace the New Yorker font with Arial and it&#8217;ll look like any old website.<\/li>\n<li><strong>Fonts given an emotional association to the content. <\/strong>The content has an air of authority because of the font it uses (after all, it looks like it was written by The New Yorker).  It is the reason why phishing sites use the fonts, colours and logos of the banks they are posing as.<\/li>\n<li><strong>Fonts can help (or hinder) the legability of content.<\/strong> Scanning the content, you can tell where the article titles are, where the navigation is, and what section each of the articles belong to.  This is all because of the way fonts are used on the site.<\/li>\n<\/ul>\n<p><div id=\"attachment_60\" style=\"width: 460px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-60\" class=\"size-full wp-image-60  \" title=\"newYorkerScreenshot\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2009\/09\/newYorkerScreenshot1.jpg\" alt=\"newYorkerScreenshot\" width=\"450\" height=\"206\" \/><p id=\"caption-attachment-60\" class=\"wp-caption-text\">The New Yorker&#39;s website is a great example of how to use fonts effectively on the web.<\/p><\/div><\/p>\n<p style=\"text-align: left;\">The New Yorker uses images in order to display fonts.  Using font embedding effectively would save on bandwidth, since one font download could be used for all the headings on the page.<\/p>\n<h2>Font formats supported<\/h2>\n<p>Firefox 3.5+ , Safari 3.1+, Opera 10+, Chrome 4.0+ and Internet Explorer 4.0+ all support @font-face embedding (Google&#8217;s Chrome 3.0 beta does as well, but <a href=\"http:\/\/opentype.info\/blog\/2009\/04\/16\/google-chrome-with-webfonts-support\/\">users will have to start it up in a special mode to make it work<\/a>).  They all support the use of <a title=\"Wikipedia TrueType entry\" href=\"http:\/\/en.wikipedia.org\/wiki\/TrueType\">TrueType<\/a> (.ttf) and <a title=\"Wikipedia OpenType entry\" href=\"http:\/\/en.wikipedia.org\/wiki\/OpenType\">OpenType<\/a> (.otf) fonts &#8230; <strong>except<\/strong> for Internet Explorer which only supports the proprietary <a title=\"Wikipedia Embedded OpenType entry\" href=\"http:\/\/en.wikipedia.org\/wiki\/Embedded_Open_Type\">Embedded Open Type<\/a> (.eot) format.  There aren&#8217;t as many fonts available in this format and the tool Microsoft gives out that converts .ttf fonts to .eot, called <a href=\"http:\/\/www.microsoft.com\/typography\/WEFT.mspx\">WEFT<\/a>, is quite frustrating to use, and even crashes on Vista.  There is, however, an excellent command-line tool, <a href=\"http:\/\/code.google.com\/p\/ttf2eot\/\">ttf2eot<\/a>, that does a much better job. Both WEFT and ttf2eot only convert TrueType to Embedded Open Type &#8211; if you want to convert an <em>OpenType<\/em> font to Embedded Open Type, it is necessary to use <a href=\"http:\/\/fontforge.sourceforge.net\/\">FontForge<\/a>, a free font-editing tool, to convert the font to TrueType first, and then use ttf2eot to convert the resultant font to .eot format.  Although this method is roundabout and results in loss of detail due to the way the font formats store information, it is the only way I know to do this conversion.<\/p>\n<p>For more detail on how to perform .eot font conversions using ttf2eot and FontForge, check out Edward O&#8217;Connor&#8217;s great article <cite><a href=\"http:\/\/edward.oconnor.cx\/2009\/07\/how-to-create-eot-files-without-microsoft-weft\">How to create EOT files without Microsoft WEFT<\/a><\/cite><\/p>\n<div class=\"importantNotes\">\n<p><strong>Update:<\/strong> Since I have originally written this article, I have created <a href=\"https:\/\/www.useragentman.com\/blog\/2011\/02\/20\/converting-font-face-fonts-quickly-in-any-os\/\">a command-line tool that will convert TTF or OTF font into all font formats supported by all the browsers<\/a>, along with an embedded stylesheet.  Font Squirrel also has an excellent on-line tool that you can use to do this as well.  In addition, all modern browsers now support <a href=\"http:\/\/en.wikipedia.org\/wiki\/Web_Open_Font_Format\">WOFF fonts<\/a>, and quite a few also support <a href=\"http:\/\/nimbupani.com\/about-fonts-in-svg.html\">SVG fonts<\/a> as well.  To keep up with what works with what, take a look at <a href=\"http:\/\/www.caniuse.com\/#search=@font-face\">CanIUse.com&#8217;s excellent compatibility chart<\/a>.<\/p>\n<\/div>\n<h2>Where to get fonts you can legally use in web pages.<\/h2>\n<p>Although it is now technically possible to embed almost any font inside a web page, it is important to remember that if you use a commercial font for this purpose, you must have a license to do this.  Since putting a font on a website will allow anyone on the Web to download it, a lot of font foundries currently do not allow their fonts to be used for web page embedding. It is for this reason that the browser vendors have been reluctant to implement this technology into their products until recently (font embedding is part of the CSS2 specification, which has been around since 1998).<\/p>\n<p>Luckily, there are a few sites that are sprouting up that have done the initial work for you by listing fonts that allow font embedding on web pages legally.  The ones that I have visited include:<\/p>\n<ul>\n<li><a href=\"http:\/\/www.fontsquirrel.com\">Font Squirrel&#8217;s<\/a> <a href=\"http:\/\/www.fontsquirrel.com\/fontface\">@font-face page<\/a>, which include @font-face kits that include an .eot as well as an .otf or .ttf font.  Each kit also includes <strong><\/strong>a stylesheet which can be linked directly into your document so you can use the font with minimal coding.<\/li>\n<li><a href=\"http:\/\/www.smashingmagazine.com\/\">Smashing Magazine&#8217;s<\/a> has an excellent article, <cite><a href=\"http:\/\/www.smashingmagazine.com\/2007\/11\/08\/40-excellent-freefonts-for-professional-design\/\">40+ Excellent Freefonts For Professional Design<\/a><\/cite><\/li>\n<li><a href=\"http:\/\/kernest.com\/\">Kernest.com<\/a> hosts a whole slew of fonts that can be used for font-embedding.<\/li>\n<li><a href=\"http:\/\/webfonts.info\">Webfonts.info<\/a> has a page dedicated to <a href=\"http:\/\/webfonts.info\/wiki\/index.php?title=Fonts_available_for_%40font-face_embedding\">fonts available for @font-face embedding<\/a>.<\/li>\n<\/ul>\n<p>Note that whenever you use <strong>any<\/strong> font, make sure you check the license that comes with it.  Some fonts, even if their license allows for font embedding, may not allow you to use it for commercial purposes.  Others may, but only for a fee.  To be safe, check the documentation that comes with the font.<\/p>\n<h2>How to insert a font into your webpage<\/h2>\n<p>Once you have a font that you&#8217;d like to insert into your webpage, you first have to declare it inside your CSS stylesheet:<\/p>\n<blockquote class=\"code\">\n<pre>@font-face {\r\n    font-family: 'Droid Sans';\r\n    src: url('DroidSans-webfont.eot?#iefix') format('embedded-opentype'),\r\n         url('DroidSans-webfont.woff') format('woff'),\r\n         url('DroidSans-webfont.ttf') format('truetype'),\r\n         url('DroidSans-webfont.svg#DroidSansRegular') format('svg');\r\n    font-weight: normal;\r\n    font-style: normal;\r\n}\r\n<\/pre>\n<\/blockquote>\n<p>It is very important to note here that <strong>order counts<\/strong>.  There are variations of this CSS syntax, but what I present above is from Ethan Dunham&#8217;s excellent article <a href=\"http:\/\/www.fontspring.com\/blog\/the-new-bulletproof-font-face-syntax\">The New Bulletproof @Font-Face Syntax<\/a>.  It is the one that seems to be simplest and most bulletproof, even beating Paul Irish&#8217;s <a href=\"http:\/\/paulirish.com\/2009\/bulletproof-font-face-implementation-syntax\/\">Bulletproof @font-face syntax<\/a>, which is what I recommended in a previous iteration of this article.<\/p>\n<p>The <code>?#iefix<\/code> after the EOT font is there to avoid a bug in older versions of IE.  See  <a href=\"http:\/\/www.fontspring.com\/blog\/the-new-bulletproof-font-face-syntax\">The New Bulletproof @Font-Face Syntax<\/a> for more details.  <strong>Also note the <code>#DroidSansRegular<\/code> in the svg url.<\/strong>  If you open up an SVG font in a test editor, you&#8217;ll see something like this:<\/p>\n<blockquote class=\"code\">\n<pre>\r\n&lt;?xml version=\"1.0\" standalone=\"no\"?&gt;\r\n&lt;!DOCTYPE svg PUBLIC \"-\/\/W3C\/\/DTD SVG 1.1\/\/EN\" \"http:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd\" &gt;\r\n&lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;\r\n&lt;metadata&gt;\r\nThis is a custom SVG webfont generated by Font Squirrel.\r\nCopyright   : Digitized data copyright  2007 Google Corporation\r\nFoundry     : Ascender Corporation\r\nFoundry URL : http:\/\/www.ascendercorp.com\r\n&lt;\/metadata&gt;\r\n&lt;defs&gt;\r\n&lt;font <span class=\"hilite\">id=\"DroidSansRegular\"<\/span> horiz-adv-x=\"1128\" &gt;\r\n.\r\n.\r\n.\r\n<\/pre>\n<\/blockquote>\n<p>The string after the # in the svg @font-face declaration (in this case <code>#DroidSansRegular<\/code> corresponds to the <code>id<\/code> in the svg file&#8217;s <code>font<\/code> tag.<\/p>\n<p>After you declare the font, you can use it inside any of your selectors as you would use any other font:<\/p>\n<blockquote class=\"code\">\n<pre>body {\r\n     font-family: \"Droid Sans\", \"Arial\", \"Helvetica\", sans-serif;\r\n}<\/pre>\n<\/blockquote>\n<p>Note that it is still necessary to use alternative fonts &#8211; this is so that user agents that don&#8217;t support @font-face will still show an appropriate, similar looking font.<\/p>\n<p>Some font families are contained in not just one file.  For example, Droid Sand  has a bold variant that is stored in a separate TrueType file (the .eot file used by Internet Explorer in the above example contains both the regular and bold variants).  The bold variant of Droid Sans can be declared correctly in your stylesheet like this:<\/p>\n<blockquote class=\"code\">\n<pre>@font-face {\r\n    font-family: 'Droid Sans';\r\n    src: url('DroidSans-webfont.eot?#iefix') format('embedded-opentype'),\r\n         url('DroidSans-webfont.woff') format('woff'),\r\n         url('DroidSans-webfont.ttf') format('truetype'),\r\n         url('DroidSans-webfont.svg#DroidSansRegular') format('svg');\r\n    font-weight: normal;\r\n    font-style: normal;\r\n\r\n}\r\n\r\n@font-face {\r\n    font-family: 'Droid Sans Bold';\r\n    src: url('DroidSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),\r\n         url('DroidSans-Bold-webfont.woff') format('woff'),\r\n         url('DroidSans-Bold-webfont.ttf') format('truetype'),\r\n         url('DroidSans-Bold-webfont.svg#DroidSansBold') format('svg');\r\n    font-weight: normal;\r\n    font-style: normal;\r\n\r\n}\r\n<\/pre>\n<\/blockquote>\n<p>It will be necessary to use a different font name for the bold variant, but it is the easiest and safest cross-browser way to do this.<\/p>\n<h2 id=\"browser-differences\" name=\"browser-differences\">Browser Differences<\/h2>\n<p>To effectively illustrate how differently browsers render embedded fonts, let&#8217;s compare them side by side:<\/p>\n<table border=\"0\">\n<thead>\n<tr>\n<th><\/th>\n<th>Safari 3<\/p>\n<p>Windows<\/th>\n<th>Firefox 3.5<\/p>\n<p>Windows<\/th>\n<th>Explorer 6<\/p>\n<p>Windows<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<th>Title of this blog post<\/th>\n<td><img decoding=\"async\" title=\"Screenshot Detail 1 (Safari)\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2009\/09\/safari-font-11.png\" alt=\"Screenshot Detail 1 (Safari)\" \/><\/td>\n<td><img decoding=\"async\" title=\"Screenshot Detail 1 (Firefox)\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2009\/09\/firefox-font-12.png\" alt=\"Screenshot Detail 1 (Firefox)\" \/><\/td>\n<td><img decoding=\"async\" title=\"Screenshot Detail 1 (IE)\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2009\/09\/ie-font-11.png\" alt=\"Screenshot Detail 1 (IE)\" \/><\/td>\n<\/tr>\n<tr>\n<th>Close-up of the title of this blog post<\/th>\n<td><img decoding=\"async\" title=\"Screenshot Closeup 1a (Safari)\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2009\/09\/safari-font-1-detail2.png\" alt=\"Screenshot Closeup 1a (Safari)\" \/><\/td>\n<td><img decoding=\"async\" title=\"Screenshot Closeup 1a (Firefox)\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2009\/09\/firefox-font-1-detail.png\" alt=\"Screenshot Closeup 1a (Firefox)\" \/><\/td>\n<td><img decoding=\"async\" title=\"Screenshot Closeup 1a (IE)\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2009\/09\/ie-font-1-detail.png\" alt=\"Screenshot Closeup 1a (IE)\" \/><\/td>\n<\/tr>\n<tr>\n<th>Subheading from this blog post<\/th>\n<td><img decoding=\"async\" title=\"Screenshot Detail 2 (Safari)\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2009\/09\/safari-font-1-detail1.png\" alt=\"Screenshot Detail 2 (Safari)\" \/><\/td>\n<td><img decoding=\"async\" title=\"Screenshot Detail 2 (Firefox)\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2009\/09\/firefox-font-2.png\" alt=\"Screenshot Detail 2 (Firefox)\" \/><\/td>\n<td><img decoding=\"async\" title=\"Screenshot Detail 2 (IE)\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2009\/09\/ie-font-2.png\" alt=\"Screenshot Detail 2 (IE)\" \/><\/td>\n<\/tr>\n<tr>\n<th>Close-up of subheading of this blog post<\/th>\n<td><img decoding=\"async\" title=\"Screenshot Closeup 2 (Safari)\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2009\/09\/safari-font-2-detail.png\" alt=\"Screenshot Closeup 2 (Safari)\" \/><\/td>\n<td><img decoding=\"async\" title=\"Screenshot Closeup 2 (Firefox)\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2009\/09\/firefox-font-2-detail.png\" alt=\"Screenshot Closeup 2 (Firefox)\" \/><\/td>\n<td><img decoding=\"async\" title=\"Screenshot Closeup 2 (IE)\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2009\/09\/ie-font-2-detail.png\" alt=\"Screenshot Closeup 2 (IE)\" \/><\/td>\n<\/tr>\n<tr>\n<th>Close-up of main text of this blog post<\/th>\n<td><img decoding=\"async\" title=\"Screenshot Closeup 3 (Safari)\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2009\/09\/safari-3-detail.png\" alt=\"Screenshot Closeup 3 (Safari)\" \/><\/td>\n<td><img decoding=\"async\" title=\"Screenshot Closeup 3 (Firefox)\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2009\/09\/firefox-3-detail.png\" alt=\"Screenshot Closeup 3 (Firefox)\" \/><\/td>\n<td><img decoding=\"async\" title=\"Screenshot Closeup 3 (IE)\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2009\/09\/ie-3-detail.png\" alt=\"Screenshot Closeup 3 (IE)\" \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>As you may see, there are some slight differences in the way that fonts are rendered in the various browsers:<\/p>\n<ul>\n<li><strong>Fonts displayed on Safari for Windows (and all browsers on the Mac) in my opinion look the nicest<\/strong>: they are nicely smoothed out and the text is quite easily read at smaller sizes.  This is due to the way Apple products render fonts.  <a title=\"Joel Spolsky article &quot;Font smoothing, anti-aliasing, and sub-pixel rendering&quot;\" href=\"http:\/\/www.joelonsoftware.com\/items\/2007\/06\/12.html\">Apple has always differed in philosophy with Microsoft on how to render fonts<\/a>, and this difference is quite obvious when testing pages under the Windows operating system.<\/li>\n<li><strong>I have found that Internet Explorer does a poor job when displaying fonts converted from OpenType<\/strong> \u2014 the glyphs tend to be more jagged and some elements tend to be rendered thinner than they should be. GrauBlau Web, the font used in the headings of  this page, is a converted OpenType font, and you can see this effect in the close-ups above. It does not occur in the main body of the text because Droid Sans is a TrueType font.  There seems to be two reasons for this:\n<ol>\n<li>There was information loss when converting GrauBlau Web from OpenType to TrueType.<\/li>\n<li>In Explorer, <a href=\"http:\/\/en.wikipedia.org\/wiki\/ClearType\">ClearType<\/a> renders this font using subpixel anti-aliasing quite more severely than Safari, while other Windows browsers use vanilla anti-aliasing to get the job done.  A <a href=\"http:\/\/www.luxography.com\/\">friend of mine<\/a> pointed this out, and he said that it&#8217;s because ClearType renders TrueType (and, it seems, Embedded Open Type) fonts with subpixel anti-aliasing, but OpenType for some reason isn&#8217;t.  I don&#8217;t know the reasons why, but in this example it looks like it is true &#8211; if you look at all of the Explorer closeups,you&#8217;ll see the coloured pixels on the edge of all the glyphs, while in Firefox only Droid Sans (which is a TrueType font) has them.<\/li>\n<\/ol>\n<\/li>\n<li><strong>Firefox only allows you to embed fonts that come from the same server<\/strong>, unless some special headers appear in the HTTP server response.  Also, unlike the other browsers, <strong>Firefox users first see the page without the embedded font <em>until<\/em> the font is loaded completely<\/strong>, at which time the fonts suddenly appear on the page. While it can be argued that this is a good thing (the user can read the content immediately without having to rely on the special font), this may not what a web designer would consider desirable.<\/li>\n<\/ul>\n<p>There are a few more differences, which are better outlined at the <a href=\"http:\/\/webfonts.info\/wiki\/index.php?title=Main_Page\">Web Fonts<\/a> Wiki, which seems to keep its information up-to-date.<\/p>\n<h2>How to choose which fonts to use<\/h2>\n<p>Not having gone to design school, I cannot claim to be an authority on this subject, but I think it is safe to say that when choosing the fonts that you are going to use, it should be in sync with the mood and message you want readers to experience.  Chuck Green&#8217;s article, <a href=\"http:\/\/www.ideabook.com\/tutorials\/typography\/type_palettes.html\">Type palettes<\/a>, goes into more depth on this subject, and Michael Martin of Smashing Magazine has a great article about <a href=\"http:\/\/www.smashingmagazine.com\/2009\/08\/20\/typographic-design-survey-best-practices-from-the-best-blogs\/\">Typographic Design Patterns and Best Practices<\/a>.  Although both of these articles don&#8217;t go into font-embedding specifically, they are still relevant reading.<\/p>\n<p>It took me a long time to decide on the fonts I have used here on my blog. When designing the layout, I was going for two things:<\/p>\n<ol>\n<li>I wanted the body text to be easy to read<\/li>\n<li>I wanted the feeling of the whole blog to be friendly and not look like an academic paper<\/li>\n<\/ol>\n<p>In the end I decided to use:<\/p>\n<ol>\n<li><a href=\"http:\/\/www.fonts.info\/info\/press\/free-fonts-for-font-face-embedding.htm\">GrauBlau Web<\/a> for the headers because it is narrow (which allows more text on a line), easy on the eyes, and since it is used on headers, the user notices it right away and thinks &#8220;Hey, this looks different!&#8221;.<\/li>\n<li><a href=\"http:\/\/www.droidfonts.com\/info\/droid-sans-fonts\/\">Droid Sans<\/a> for the main text because it was designed to be easy to read even on low resolutions and, in combination with GrauBlau Web, gave the site a nice, pleasant and friendly look.<\/li>\n<li><a href=\"http:\/\/www.droidfonts.com\/info\/droid-sans-mono-fonts\/\">Droid Sans Mono<\/a> for the code listings since it was designed to compliment Droid Sans, and, I believe, looks a jillion times better than Courier (which everyone up to now has been forced to use due to a lack of nice looking monospace fonts installed on most computers today).<\/li>\n<\/ol>\n<p>Again, I didn&#8217;t go to design school, but I think for the type of site this is (a blog about web technology), it suits its purpose rather well.   I <strong>was<\/strong> tempted to choose more ornate fonts, but I didn&#8217;t think they suited the content.<\/p>\n<h2>Optimizing Font Files<\/h2>\n<p>Sometimes you may find that the font files are a little larger than you&#8217;d like.  If you open up the font file in <a href=\"http:\/\/fontforge.sourceforge.net\/\">FontForge<\/a>, you may find that a lot of the glyphs inside are not necessary for what you are doing (for example, if your pages are all in English, you might not want all the accented characters that the font contains).  Use FontForge to delete the glyphs you don&#8217;t need and regenerate the font &#8211; you&#8217;ll see that you save quite a few kilobytes, especially in a Unicode font with lots of Japanese and Russian characters included.<\/p>\n<p>Again, because of licensing issues, please ensure that the font license allows you to edit the font in this manner.<\/p>\n<h2>Conclusion<\/h2>\n<p>What is written here is just the tip of the iceberg.  In the next few years, I expect to be reading several articles on the best way to use embedded fonts, from technical, usability, internationalization and design perspectives. Unfortunately, I also expect to see a lot of MySpace pages looking uglier than ever.  Imagine! Now, teenagers around the world can have animated backgrounds, Black Eyed Peas songs playing on load, <strong>and<\/strong> have that <a href=\"http:\/\/www.fontsquirrel.com\/fonts\/junkos-typewriter\">crazy typewriter font<\/a> on the main copy.<\/p>\n<p>My God, what have we done &#8230;.<\/p>\n<div id=\"_mcePaste\" style=\"overflow: hidden; position: absolute; left: -10000px; top: 1368px; width: 1px; height: 1px;\">http:\/\/webfonts.info\/wiki\/index.php?title=Fonts_available_for_%40font-face_embedding<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The fact that we can now choose any font to embed inside our web pages and applications using @font-face is something to celebrate, and removes a long existing set of handcuffs placed on web designers.  This article covers how to use @font-face in all browsers, as well as some interesting little-known technical details.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,51,121,9,97,10],"tags":[219,19,15,18,22,20,17,16,21],"class_list":["post-13","post","type-post","status-publish","format-standard","hentry","category-font-face","category-cleartype-technologies","category-converting","category-css","category-fontforge-fonts","category-fonts","tag-font-face","tag-embedded-font","tag-eot","tag-font","tag-font-embedding","tag-fontforge","tag-otf","tag-ttf","tag-ttf2eot"],"_links":{"self":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/13","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/comments?post=13"}],"version-history":[{"count":119,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/13\/revisions"}],"predecessor-version":[{"id":7672,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/13\/revisions\/7672"}],"wp:attachment":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/media?parent=13"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/categories?post=13"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/tags?post=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}