Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Webfonts or Locally loaded fonts?

Ever since the troubles brought on by using Cufon I ventured away from using external font resources, but as of late, I have been looking for alternate methods of loading fonts to see if there's a better way; better methods have a way of just appearing out of the blue.

There are a lot of new methods out there, and variations for each method it seems; Should I use typekit? or google webfonts (with js or css)? should I continue to use locally loading fonts (e.g. fontsquirrel.com generated method)?

I'll list the methods that seem the most well received below, with some tests, but is it really worth moving to a webfont? It seems like it would carry a higher resource load (http requests) and have less file format types (less compatibility) etc. But looks like files are loaded async and efficiently in most cases.

  1. Is it just a matter of situation and need? If so, what are they?
  2. Are there drastic differences between these methods?
  3. Is there a better method out there I haven't listed?
  4. What are the pro's/con's for performance? Look? dependencies? compatibilities?

I'm really looking for best practices here, performance is a big thing but so is scalability and ease of use. Not to mention, look and feel.


Google CSS

  • only uses external stylesheet
  • only uses smallest compatible file type
  • can use @import or <link> or take the contents of the styleshee (@font-face) and put it directly into your own stylesheet.

test results

  78ms load of html   36ms load of css 

enter image description here


Google JS Method

  • uses webfont.js to load styleshet
  • only uses smallest compatible file type
  • appends :root element with class
  • adds script to head.

test results

    171ms load of html     176ms load of js     32ms load of css 

enter image description here


Typekit method

  • appends :root element with class.
  • can use *.js snippet or externally loaded file *.js file
  • uses data:font/opentype instead of font file.
  • adds script to head
  • adds embedded css to head
  • adds external stylesheet to head

    you can easily add/remove/adjust fonts and targetted selectors from typekit.com

test results

  169ms load of html   213ms load of js   31ms load of css   3ms load of data:font/ 

enter image description here


…& the Font Squirrel Method

@font-face{     font-weight:400;     font-style:normal;     font-family:open_sanslight;     src:url(../font/opensans-light-webfont.eot);     src:url(../font/opensans-light-webfont.eot?#iefix) format(embedded-opentype),         url(../font/opensans-light-webfont.woff) format(woff),         url(../font/opensans-light-webfont.ttf) format(truetype),         url(../font/opensans-light-webfont.svg#open_sanslight) format(svg) } 

…or with data:font method…

@font-face {     font-family: 'open_sanslight';     src: url('opensans-light-webfont-f.eot'); }  @font-face {     font-family: 'open_sanslight';     src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF4sABMAAAAArXQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcZLn0KkqwK44Jq866WBSpzpsNY2IyGAhoJFBbYjuxmyns5sNa4NwldcJ7eh3Uy5gQkURIlqWzONe3HcLsDX1x/+jifDXvbzgTBjopZElndil3hJkERJkmRJkVRJk3TJkEzJkmzOc4HLXOEOF7nEX/*thisisnotafullencodingjustanexample*/bZwUnK4yS3JlTx2Sr4USKEUSbHVX9fcGNBs4fqgw+GoNHU7lKr36Eqn0lCWt6pHFpWaUlc6lS6loSxRlirLlP/uuU01dVfT7L6gPxyqraluCpgj3WtqeC1V4VBDW2N4K1r1esw/IupKp9L1FwlqnuIAAAB42j3NvQ7BUBjG8R5tTz/0u2UjNTTESYQbMGmXLiISbeI6zBYjbuWtye7CeMJxtuf3LP8ne1+IXbWa7G3TMXZru4qLZkJRW1O2wzi3I+Li2Gik5yXpYkNGXj70YU98YQLGHxwwXxIWwO8SNmAdJBzAXku4gFNI9AF38QMjTwZ9vN6yJzq9OoEB6I8VQzDYK0ZguFKMwWiumIDxTDEFk6liBqaF4gDMFFvKxAfOxFUGAAABUxSL9gAA) format('woff'),          url('opensans-light-webfont-f.ttf') format('truetype'),          url('opensans-light-webfont-f.svg#open_sanslight') format('svg');     font-weight: normal;     font-style: normal;  } 
like image 563
darcher Avatar asked Mar 01 '14 16:03

darcher


People also ask

Should I load Google Fonts locally?

The speed test results suggest that hosting Google Fonts locally don't give any specific performance benefits. They look almost identical. To confirm this theory, they added many more fonts to the website before testing it again.

Should fonts be preloaded?

In summary, without font preloading, you might run into a situation where a browser is ready to load your site's text, but it can't because the font isn't available yet. That is, it needs to download the font before it can paint the text.

Is it better to import font in CSS or HTML?

CSS files support web fonts basically in every browser by naming the font-family declaring the source file. The best way is for me is to include it into my . css file and linking it into my header.

Should I use WOFF or WOFF2?

Web Open Font Format 2 (WOFF2): WOFF2 is an update to the original WOFF format. Developed by Google, this is considered the best format of the bunch because it offers smaller file sizes and better performance for modern browsers that support it.


1 Answers

First, I'll clear something up about Google's offering. It will actually load the smallest format your browser can handle. WOFF offers small file sizes, and your browser supports it, so it's the one you see. WOFF is also fairly widely supported. However, in Opera for example, you'll probably get the TrueType version of the font.

The file size logic is also, I believe, why Font Squirrel tries them in that order. But that is mostly speculation on my part.

If you're working in an environment where every request and byte counts, you'll have to do some profiling to find out which works best for your use case. Will people be only viewing one page, and never visiting again? If so, caching rules don't matter as much. If they're browsing or returning, Google might have better caching rules than your server. Is latency the bigger problem, or bandwidth? If latency, aim for fewer requests, so host it locally and combine files as much as possible. If bandwidth, go with whichever option ends up with the smallest code and smallest font format.

Now, on to the CSS vs JS consideration. Let's look at the following piece of HTML:

<head>     <script type="text/javascript" src="script1.js"></script>     <link rel="stylesheet" type="text/css" href="style1.css" />     <style type="text/css">         @import url(style2.css);     </style>     <script type="text/javascript">         (function() {             var wf = document.createElement('script');             wf.src = 'script2.js';             wf.type = 'text/javascript';             wf.async = 'true';             var s = document.getElementsByTagName('script')[0];             s.parentNode.insertBefore(wf, s);         })();     </script> </head> 

In many cases, script1, style1, and style2 would be blocking. This means the browser can't continue displaying the document until that resource has loaded (although modern browsers fudge this a bit). Which can actually be a good thing, especially with stylesheets. It prevents a flash of unstyled content, and it also prevents the giant shift that would occur when applying the styles (and shifting content is really annoying as a user).

On the other hand, script2 wouldn't be blocking. It can be loaded later, and the browser can move on to parsing and displaying the rest of the document. So that can be beneficial too.

Specifically talking about fonts (and even more specifically, Google's offering), I would probably stick with a CSS method (I like @import because it keeps styling with the stylesheet, but that could be just me). The JS file loaded by the script (http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js) is larger than the @font-face declaration, and just looks like a lot more work. And I don't believe loading the actual font itself (the WOFF or TTF) is blocking, so it shouldn't delay things too much. I'm not personally a huge fan of CDNs, but the fact is that they're REALLY fast. Google's servers will beat most shared hosting plans by a landslide, and because their fonts are so popular, people might even have them cached already.

And that's all I've got.

I have no experience with Typekit, so I left it out of my theorizing. If there's any inaccuracies, not counting generalizations between browsers for arguments sake, please point them out.

like image 61
ZachRabbit Avatar answered Sep 25 '22 07:09

ZachRabbit