How to Embed Fonts on Your Blog Site - dummies

How to Embed Fonts on Your Blog Site

By Melissa Culbertson

At one point, live text was limited to using web-safe fonts. Luckily, you now have many more interesting choices regarding fonts, thanks to font-embedding technology, which enables you to embed a font into your blog’s web pages. With an embedded font, visitors see the font you selected for your design, even if that font isn’t web-safe.

So what’s the catch? Embedded fonts can slow the download of your blog in a visitor’s browser. Also, for embedded fonts to work, your visitors’ web browsers must support font-embedding.

When it comes to fonts, a browser knows what font to display by the font name listed in your CSS (Cascading Style Sheet). With a web-safe font, a browser displays the font correctly by pulling that font’s information from a computer’s operating system.


With an embedded font, a browser displays the font correctly because that website’s CSS defines where a browser can find the font files it needs to display (since the font isn’t on the website visitor’s computer).

Services like Adobe Typekit and Google Web Fonts host the fonts for you. When someone visits your blog, your CSS knows to display an embedded font by pulling the font files from another location besides your computer.

To use embedded fonts with one of these services, they provide you with the code you need to make a font display on your blog. Nice! From there, you need to be able to add the code they provide to your blog’s HTML document, usually in a file called header.php on WordPress or by editing your template file in Blogger.

You also need to be able to alter your CSS in order to change from your current fonts to the names of the fonts you want to embed.

A more advanced way to use embedded fonts is to use the @font-face property within your CSS. To do this, you need to be familiar enough with coding to either code it manually or use a service like FontSquirrel, which helps you generate the code and files needed to use the @font-face property. The font files can either be hosted on your own server or with a font service like FontSquirrel.