Rendall's blog

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="" 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!

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

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:

← Home

Leave a comment on this post: