How to webfont

code web

This is a quick guide to get a webfont into your website with some attention to web performance and is intended as a starting point for small sites that will write in a Latin alphabet. At the end of the post are some resources for further optimizations, if you choose.

First, get your font. This site uses Montserrat but there are lots of other groovy options over at Google fonts. There are other nifty sites for free fonts, too. If this is your site's text font, grab the files that represent the regular, italic, bold and bold italic versions.

Second, download the font files and host them yourself. Do not just throw the link into your html head tag like this <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">. Among many reasons for not doing this, you would badly slow down your site's load time.

Third, optimize your font! Font Squirrel is good enough and has a good reputation, but there are other online optimizine services and programs. Your font likely has glyphs and such that you will never use! Get those out of there!

  • Upload all of the font files you downloaded in the second step to Font Squirrel
  • Select all of the font formats except EOT lite
  • If your font files are TrueType, select TrueType hinting: Keep Existing
  • Check Spaces and Hyphens in Fix Missing Glyphs
  • If you have a fallback font, and you do, pick it in X-height Matching
  • Under Subsetting choose custom. This is where you toss most of your font file size.
    • Important: deselect as much as you can. Start with nothing selected.
    • If this is a display font for just the header or logotype
      • Under Single Characters add only those characters you will use
    • If this is your website's text font, select these:
      • Lowercase
      • Uppercase
      • Numbers
      • Punctuation
      • (maybe) Currency
      • Look at Subset Preview to make sure that you have all the glyphs you will need
      • Add anything missing in Single Characters, e.g: ÄÖÅäöåé (for this site)
  • Enter a memorable name under CSS: CSS Filename, e.g. fonts.css
  • Check the Agreement assuming your fonts are legal (and they are, if you got them from the Google site)
  • Then Download your kit

Fourth, unzip and open up your css file (e.g. fonts.css). There are a few modifications you will need to make, here.

  • Change all of the font-family values to the same value.
    • (e.g. Change font-family: 'montserratbold' to font-family: 'Montserrat')
  • Under each @font-face declaration change font-weight and font-style as appropriate
    • For the bold version of your font, change font-weight to bold
    • For the italic version of your font, change font-style to italic
    • For the italic and bold version of your font, change them both
  • Change every url value to be relative to the css file
    • e.g. url('../fonts/montserrat-bold.eot')
  • Inside of each @font-face declaration, add either line: font-display: swap; or font-display: optional;

Fifth, paste the @font-face declarations into your site's stylesheet, and move the fonts into your project directory structure. Again, make sure that the paths in the url are relative to the css file that contains the @font-face declarations, and not, for example, to the webpage that links to it.

Sixth, wire up your html tags to the font files, using the name you chose for them in the fourth step. e.g. html { font-family: "Montserrat", Arial, Helvetica, sans-serif;}

Troubleshooting: fire up your browser and see if the fonts are being loaded. If not, the developer console should tell you whence it seeks them.

Finally, you have definitely degraded the load time and performance of your site. You have to decide whether it's good enough or if you need further optimizations.

Here are some relatively recent (as of writing) articles about the topic:

Comments:

Leave a comment

There was an error. It's me, not you. You could try again later? Or try another method? Email? Smoke signals? Tell me what went wrong!

please enter a substantive message with no link or website address
please enter your name
please enter an email

Comment successfully sent, and it awaits moderation.