Using @font-face to Embed Hosted Fonts on Your Blog

In this post

Embedding fonts can give your website an impressive yet subtle look and feel. Read more about using @font-face here to liven up your website.

If you want to give your website a face-lift one thing you can do is update your default body font by using @font-face. By using @font-face you can easily update the look of your site by embedding any number of free fonts. Most recently, I’ve been using fonts from Google fonts.

I’m using several variations of Google’s new default system font ‘Roboto‘ on my website. Roboto Condensed for my body text in particular. It’s highly legible on most all devices and isn’t the standard Arial you might be used to/ bored of. It’s a very subtle change, but definitely noticeable and really helps tie the site together.

Fonts already loaded on your computer display the fastest as your computer already has them loaded at the system level. For a list of common Windows loaded system fonts check out this link here. If however, you want to have a more custom look to your site or blog then this font solution is what you’re looking for.

Using @font-face

Updating your font can give your site a subtle yet effective new look. By using @font-face in your style-sheet you can source any font you see fit. If you’re worried about your site load time you’ll want to find the font you want to use and host it on your own website. To make sure your font works in the maximum amount of browsers you need to provide embed codes and font formats supported by most browsers.

using @font-face

Using @font-face to Support Modern & Legacy Browsers

The code below supports modern browsers as well as legacy browsers by using embed codes for each as well as supported font formats. I’ll explain what each code below is for.

This first line defines the font you’re embedding. It initially assigns the font-family that will be your new base font.

This second line sources the actual font your’re using on the page. This line supports Internet Explorer 9 compatibility mode. Plenty of people use IE as there default browser even though IE 10 and Microsoft Edge are available. If you want to support all your readers you’ll have to start here.

Using @font-face to Support IE 6 – IE 8

The following line of code is for IE 6-IE 8 support. Believe it or not there are still people surfing the Internet with these historically inept browsers. Include the following line to insure that your font is able to be viewed by them.

Using @font-face to Support Super Modern & Mobile Browsers

Woff2 supports super-modern browsers. The Woff2 font format provides the most up to date font compression available. It’s mostly a format supported by modern mobile devices so if you want your font displayed on tablets, smart phones, smart watches and more you’ll need this one as well.

Using @font-face to Support Most Modern Browsers

Most modern browsers like Firefox, Google Chrome and Microsoft edge use the WOFF font format. To create a WOff font you can use a True Type font from any foundry and convert it. Use this site to Convert TTF fonts to Woff.

Using @font-face to Support Safari, Android & iOS Browsers

The following code used to be all you needed to embed a TTF font on your site. Include this line to support older versions of Safari, Android & iOS.

Using @font-face to Support Legacy iOS

To make sure you cover all your bases and code for older legacy browsers you can use an SVG or “Scalable Vector Graphic”. An SVG font includes all the math data for your fonts along with embedded color. To make sure your font displays on browsers that don’t support any of the above

Using @font-face to Create Word Art

BY using embedded or hosted fonts you can make artwork like you only used to be able to in Photoshop before. Check out this post to embed a super stylized font like the one below anywhere on your website.

With embedded fonts you can make super impressive looking text just like this!



Using @font-face to Embed Hosted Fonts on Your Blog Click To Tweet