Thursday, November 10, 2016

Self hosting web fonts

Working for a company that is global has some interesting facets you normally wouldn't see when working for non-global companies.  One issue we've found is that Google and China don't like to play well together.  We've found that making calls to Google servers in our website causes loading issues with user's in China, since much of Google's properties are blocked in China.  That means pages may not load or takes extreme amounts of time to load.

Take for example Google web fonts.  Although it would be simple to add a link to a free Google web font and utilize it on our website to modernize our fonts, we have to think how that call to Google servers's affects our user's in China.  That rules out some seemingly simple things a non-global company might do.  So they way around that is to self host your font.  Not the ideal method, but quite effective once you figure out how to do that.

After a day of reading and browsing, this is what I've come up with:

  1. Find the font you want to self host for your website.  In my case I’m going to use Lato.  This can be found on FontSquirrel.com or fonts.google.com
    The fontsquirrel download lets’ you directly download all of the Lato.ttf files in one download.  

    In Google fonts you have to select the font,

    then you can click the Family Selected tab at the bottom of the screen and Customize in order to select which styles of the Lato font you want to download.

    Once you’ve seleced you’re variances, you click the download icon
  2. Now you have the fonts downloaded.  Unzip the font downloads, so we can move to the next step of converting them to web fonts that we can call in our web pages.
  3. To convert the .ttf files to web fonts, we’ll be using FontSquirrel’s Generator app on their website.  
    I chose Optimal in their settings and click the Agreement check box, then go up to the Upload Fonts button.  From there, you’ll select the fonts you downloaded.  Select all of them (Shift drag over all font files to select them)

    And then hit Open.
    This will start the conversion process.
  4. Once the generator is finished processing the ttf font files, you can Download Your Kit:
  5. Then you can unzip the downloaded font kit and you’ll see all of the converted.

    A note on the file types downloaded:
    Most font files you have installed will be TrueType (.ttf) with a smattering of OpenType (.otf). You can save these to your server and specify them in your CSS.
    Support for .ttf and .otf file formats is widespread across all modern browsers except IE (even the latest version) and some mobile browsers (including legacy versions of iOS Safari).
    To increase your coverage you’ll need several additional formats. .eot works for IE, .woff will work for most browsers and is the W3C’s preferred format, .svg will work on legacy browsers.
    In my case, I’m choosing the Expert option in Font Squirrel’s generator and selecting the EOT Compressed option to add the IE support.

  6. Inside of your downloaded Font Kit, you’ll find all of the web fonts and a stylesheet.css file.  The stylesheet gives you all of the @font-face styles that you need to use.
  7. In order to use the Lato fonts in your web pages, you can link to the generated stylesheet.css, or import those styles into your own style sheet.



    Then you can define classes with the Lato font:
    body{ font-family: 'Lato', sans-serif; }