Using a Font Embedding Service

With CSS3 support coming to all browsers, the newest web service to hit the internet is font embedding. Sites like TypeKit, FontSpring, WebINK, and even Google allow you to embed custom fonts into your website with just a few lines of code.

THE HISTORY OF WEB FONTS

The ability to add custom fonts to websites was added to the CSS2 spec in 1998, however it was not implement and consequently dropped in CSS2.1. One browser did choose to implement its own version of web fonts using the .EOT file format: Internet Explorer. Since version 4, IE has supported custom web fonts. In CSS3, the embeddable font spec was renewed, supporting either .TTF or .OTF font files. After concerns about licensing, the .WOFF format was also added, and any browser supporting CSS3 supports these standards, including IE9.

EMBEDDING FONTS

Because of the two different supported standards, embedding fonts is tricky. It involves checking if the font exists on a user’s machine, and if it is not found, downloading the appropriate font file to the user’s machine. This is a complicated and hard to test process due to all the variables involved, including browser support, font files and naming, and font variations. However, font embedding services allow you to bypass the hassle and embed fonts without the headache.

Using Google’s service as an example (because it’s free), the first step is finding a font to use for your project. For sake of example, we will use Raleway.

The second step is to include the CSS or javascript file which will download the file to the user’s machine. In Google’s case, it is a simple stylesheet link.

Google also allows you to combine multiple font styles and weights into a single request, but for ease we will use just one.

The third step is to decide where you want to implement the font. For example, if you want to use Raleway as a heading, you might write the following in your stylesheet:

h1 { font-family: ‘Raleway’, verdana, arial, serif; }

That’s it! Font embedding services are a great way to enhance your web development and design in a quick, easy, and usually free way.

CONSIDERATIONS

There are some important considerations here. First, you should find a similar font (if possible) to use as a back up in case your first font has chosen. In this case I have chosen Verdana because it is a tall font, as is Raleway. Remember to test your site without the embeddable font to make sure it displays correctly without your custom font. Also, make sure to check the file size for each font, as any user without the font will be required to download the font before they can see it, which can increase load time or sometimes flash the font when it downloads. Lastly, limit your use of different font styles to a couple of choices, because each one adds to file size when downloaded from Google.

Karen Skeens

Karen Skeens

Cyber Visionary and Website Guru with many years of marketing & advertising industry experience selling, marketing, writing and designing.

Leave a Reply

About Ad Ventures Brand-Strategy-Design Agency

Put your branding & marketing on a path that’s smarter, more cost-efficient and clever with

Recent Posts

Sign up for our Newsletter

let's go

Ad Venturing!

tales from the trail
an adventurous blog

Sign up to receive marketing tips we picked up on the trail.