Understanding and Using Embedded Fonts: What, Why and How?

Understanding and Using Embedded Fonts: What, Why and How?

There are so many great fonts available on the web, free or otherwise. In past years, only print design really got the privilege of using some of these gorgeous typefaces, and we web people were stuck creating websites with only the standard fonts that we could ensure were web-safe and compatible among various browsers. However, now font embedding is as easy and as compatible as ever, and as a result, we are seeing plenty of websites come out with unique fonts for blog headlines, regular page content, and other text that is variable and was once not practical to use a unique font that would require images.

Understanding and Using Embedded Fonts: What, Why and How?

Not only can we now use more creative fonts for variable content, but even elements that would have used images before can now be created by embedding fonts, often times helping search engines find websites, and also helping to create cleaner and more semantic markup on the backend. Another nice feature – for interesting fonts, we can now embed them and therefore use regular CSS styles on them, like we would with any other text.

What is Font Embedding?

Font embedding has been around for years within popular offline applications, and of course, designers have been experimenting with type and unique fonts for years before with design software. Recently, we have been able to include fonts directly on web servers, and therefore include them via CSS right into our websites. Below is an example of a custom font embedded in a webpage:


The font above in the slider needs to be variable, but they also wanted a unique and stylish font for their design. Simply embed this custom font into the website, and they can use it as regular text – without images.

The font files themselves are included on the web server, so the CSS knows exactly where to retrieve it. Unlike web-safe fonts, we must tell the CSS where to find the information for the font. We can then link to it via a number of methods.

Why Use Font Embedding?

Why go through the hassle of using font embedding? There are most certainly some instances where it would be a lot more practical and time saving to use it, but are there other benefits? Font embedding can definitely be an added luxury from a design perspective, but it does have many other practical benefits as well.

Let’s start with the most obvious…

Improved Design

With the rise in typography-based design, we are beginning to see a lot more websites – whether they are typography-based or not – use more interesting fonts. Using the same old, plain fonts that have been used for years previously just doesn’t stand out in the same way it did before. Standard web safe fonts are still great for large blocks of content, but headers today call for cleaner fonts, more professional fonts, and better designed fonts.

Plus, from a design perspective, we can have more creative freedom. No need to design a PSD around only web safe fonts anymore. Feel free to use whatever free or properly licensed font, and the development portion of the web design can surely handle it. This allows for more variety among designs, and an extra chance for you to bring your own creative freedom to the table.


Better SEO

Search engines find content and prioritize it on a webpage based on the tags they’re in. This is one reason why learning proper semantics is so important. Header tags will take on much more leverage than the alt tag of an image, so it’s easy to see why using font embedding for headlines, blog post titles, and other important pieces of content can be better off in a header tag, rather than used as an image.
Also, ever forget the alt or title tag altogether? Then the search engine would have no way to figure out what that image was trying to say at all.

Ease of Use

Get the font(s) of your choice set up during the development process, and enjoy lighter maintenance later. No need to create custom images for headers, sliders, or otherwise. Simply style, and type out whatever content is needed. That content can then change easily, which is great for updates on your end, and ease of use on a client’s end.

Using @font-face for Embedding

Within the last year, the prebuilt CSS @font-face method for embedding fonts has become standard across all browsers. This means that every browser type from the most recent update forward will support @font-face with no need for workarounds. Since this event, @font-face is seen by many developers as the best option for font embedding. It is the most efficient, the easiest to implement, and now, the most compatible.


Using @font-face to embed a font is as easy as below:

@font-face {
	font-family: CreamPuff;
	src: url('fonts/creampuff.eot');

	font-family: CreamPuff;
	font-size: 22pt;

Simply use the @font-face rule within your CSS stylesheet, name it using CSS’s standard font-family property, give it a source url (the location of the font file on the server), and reference it just as you would any other font throughout the rest of the CSS. In the example above, we uploaded a font, and set it to the font used for H2 tags. However, like with all font rules, be sure to still set up a proper font stack with standard web-safe fonts behind it.

Support for @font-face in Internet Explorer has actually been around for a while, believe it or not, but it does only recognize fonts that are in the .EOT file format (See above code). TTF and OTF will work in the majority of browsers, but to be safe, it’s best to just use an EOT font file. It’s as easy as taking any font and converting it to an EOT with a tool like this: TTF to EOT Font Converter

Otherwise, for even better compatibility and quality issues, just include both (See code below). Browsers that can handle the better format will use it, and otherwise will default to the EOT file format.

	font-family: CreamPuff;  
	src: url('fonts/creampuff.eot'); /* For IE */  
	src: local('creampuff'), url('fonts/creampuff.ttf') format('truetype'); /* For non-IE */  

Free Commercial-Use Fonts: Font Squirrel

One main issue with using @font-face and other font embedding methods is that anyone can easily embed a commercial font they have on their computer, without a license. This can cause legal problems fast, and only free for commercial-use fonts should be used. The problem is, it may not be easy to always determine which fonts are available to use freely and which are not. In comes Font Squirrel, a web service that includes and organizes the best free for commercial use fonts available for download.


Simply choose a font, download the TTF format, and then feel free to use Font Squirrel’s @font-face generator to create the code and files. This generator automatically renders the fonts for the best performance among many platforms, and provides the adaquate font formats for the best cross-browser compatibility and performance.

There are also several other services, some with fees, that provide more variety, or the ability to purchase licensing for premium fonts to use with @font-face: Font Spring, Typekit, Typefront.

Alternatives: SIFR, Cufon & FLIR

However, with some fonts, CSS doesn’t cut it design-wise. Some fonts can appear to be scratchy, or not designed well in other terms when using @font-face. While it is sufficient for the majority of fonts, if you happen to want to include a font that is having this issue, there are of course image replacement methods using Flash and JavaScript, such as SIFR, Cufon, and FLIR.

Each method has its own implementation and benefits, but all are created to be 100% SEO friendly, and also feature the other benefits of font embedding as well. Below is some information on each:


Font embedding can surely improve design, and help us as designers have fewer restrictions and more fun with website creation. Especially with the added support, and really no downsides in sight, font embedding has become a new trend that is likely to stay for a while. It allows us as designers to add our own unique touch to the typography of a website, not just through imagery, color and layout like before.

Feel free to share your opinions on any font embedding methods mentioned above, or share your own. There are plenty more options for doing so, and even font embedding services that make it even easier, without having to worry about licensing restrictions.

Kayla Knight is a web designer and frontend web developer. She specializes in responsive web design, progressive web technologies, and also knows her way around most CMS's and PHP. You can find out more and check out her portfolio at kaylaknight.co.


  1. / Reply

    Nice tips. But even if @font-face is really easy to use, you should point the fact that with Firefox 3.5+ you can’t use a font which is not at same domain. Because of Cross-Origin Resource Sharing. This can easily happen if you use a CDN (ie: WordPress + W3 Total Cache + CDN). In this case, just add a “Access-Control-Allow-Origin” header in your .htaccess (if you use Apache).

  2. / Reply

    Font Squirrel is very useful service, especially if you work with сyrillic fonts

  3. / Reply

    I found Cufon to be a good solution to replace @font-face display problems however the fact the font isn’t selectable when using Cufon is quite an issue in some cases. For things like phone numbers it’s fine, but for h1 tags for instance I’d stick to @font-face replacement.

  4. / Reply

    Thanks for the post!

    It’s very useful. For me, Cufon is fantastic addon for the website.

    Museo is one of my fav fonts.

  5. / Reply

    With the rise of tablets, typography-based web content (e-books, magazines, etc.) is really going to start taking off. Embedded fonts or replacement modules are going to be crucial for those content providers.

    Also a side note, if you use Cufon for Drupal, its been known to duplicated your Google Analytics code, giving you inaccurate traffic data. Keep that in mind when using this module.

    • Stuart,
    • May 4, 2011
    / Reply

    what about google fonts api and the free fonts available there?

  6. / Reply

    Hey you didnt cover Google Fonts!! Isnt it the best, easiest and cheapest way to do ???
    If possible why not have a follow on post with detailed comparison on all vailable options… Much like a tabled comparison

      • Phillip,
      • December 8, 2012
      / Reply

      Google Fonts offers a great option – being a CDN. However, there isn’t a wide selection of fonts to choose from. For a recent project there were 2 fonts that we had to embed because Google’s service didn’t have anything similar.

  7. / Reply

    Cool, @font-face tutorial! Just like what I need to know. Thank you for the useful article. :D

  8. / Reply

    I have to agree with the other Creashit, font-squirrel is my weapon of choice when it comes to dynamic fonts. I have a ton of dynamic fonts on my blog thanks to them.

  9. / Reply

    I don’t know much about fonts but my outsource service taught me that fonts most be legible for my clients to understand it.

    Great article!

  10. / Reply

    I like font-squirrel, it has great fonts collection, and i use cufon script for generating nice fonts.

    Google fonts is always a second option for me!

    • Jenya,
    • March 2, 2012
    / Reply

    Awesome! Another great article and very useful comments too! Thanks everyone! Greatly appreciated.

  11. / Reply

    Awesome article ! Font Squirrel is very useful service. Another one of the most popular techniques for making use of new fonts is the Google Web Fonts service. ( http://www.google.com/webfonts ).

  12. / Reply

    I’ve also tried using this technique to have unique and nice looking post titles but I get internal server error after editing some php manually.

    • Jennifer Slaughter,
    • October 31, 2012
    / Reply

    I’m not able to get this to work in IE. It works in all other browsers with the following code:

    font-family: TradeGothic;
    src: url(“fonts/tradegothicltstdcn18.eot”); /* For IE */
    src: local(‘fonts/TradeGothicLTStd-Cn18.otf’), url(“fonts/tradegothicltstdcn18.ttf”) format(‘truetype’); /* For non-IE */

  13. / Reply

    I would also mention WOFF: http://en.wikipedia.org/wiki/Web_Open_Font_Format

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.


Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.