Web Font Techniques Explained

Web Font Techniques Explained

The use of fonts in a website is a common discussion point with customers.  This article provides a high level overview of the various options for displaying fonts on the web, along with their advantages and disadvantages.

For us at Outright, the discussion usually arises after the customer and/or their designer has created a nice design for a new website and then hands the design over to us for implementing the code of the website.  This is usually when it’s discovered that the fonts that were chosen during the design process are not “public domain” and/or may not be commonly available on most PCs and Macs.  Luckily there are a number of options available in this situation and a discussion usually ensues with the customer and designer about the best approach for implementation.

Font Stacking

When a font type is defined within the CSS (cascading style sheet) of a website, the CSS is telling the end user’s browser which font should be displayed when viewing the website.  In order for this to work, the end user must have the defined font installed on their local computer and thus a problem arises then the end user does not have the font on their computer.  In this case, the user’s web browser will attempt to make a substitution.  The technique of font stacking involves defining “fallback” fonts to be used in case the primary font that was defined is not available on the end user’s computer.  This enables us to define what the substituted font will be (rather than relying on the user’s browser to decide).  It’s called “stacking” because you can actually define a number of fallback fonts in a stack or order of preference.  For example, the Helvetica Neue font is found on all Macs, but only about 7% of PCs.  In this scenario I would want to define fallback fonts that look similar but can be found on PCs.  My “stack” might look like this:

h1 {
font-family: ‘Helvetica Neue‘, Helvetica, Arial, sans-serif;
font-size: 24px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26.3999996185303px;
}

Here, in our CSS, we are telling the user’s browser to use Helvetica Neue but if the user does not have that font installed, then use Helvetica.  If Helvetica is not available, then use Arial (found on roughly 99% of PCs and Macs).  Then, as a worse-case scenario, use sans-serif.  A great tool is CSS Font Stack which will tell you the prevalence of a font on a PC vs. Mac, which substitutions you can use, and even provides snippets of CSS code to use.

The advantage to font stacking is that it’s easy to implement and the page load speeds of the website will be very fast since the font itself “lives” on the end user’s computer and does not need to be hosted anywhere.  You also avoid licensing and copyright issues.  The disadvantage is that that it’s possible that the end user has a variation of the font which is slightly different from that which was designed, and therefore it’s possible that the fonts could look different based on the actual font files that are installed on the user’s computer.

Cufón

Cufón (pronounced “koo-fon”) is a technique where the actual font is hosted on a server somewhere and then the server translates the font into vector-based images which are then loaded onto the user’s browser via javascript.  I’m over simplifying this, but essentially your browser will display the fonts as images whcih are served from a remote server.  The big advantage is that the end user does not have to have the actual font installed on their computer and the fonts will look the same regardless of the type of web browser that the user has.  This makes Cufón a popular choice for fonts that are custom.  The disadvantages are that there is some technical configuration that needs to take place on the web server, the fonts will not load as fast since they are being served via a server and rendered using javascript (there are a few technical steps that this process involves which make the rendering time a bit slower than say the @font-face technique), and you would still need to make sure that you are in copyright compliance by hosting the actual font on your server.  There are also SEO (search engine optimization) and text selection implications to using Cufón that need to be carefully considered.

Self-Hosting Fonts Using @font-face

The @font-face CSS technique involves hosting the actual font on your webserver and embedding it into your HTML using CSS so that your end users will view the font correctly when they visit your site or application.  With most browsers now supporting CSS3 natively, this is now a more reliable technique than it was with CSS2.  To implement this, the actual font is installed on the server’s file system and then the CSS’s @font-face declaration points to the font which then gets embedded into the HTML when it’s rendered in the user’s browser.  The CSS code looks like this:

@font-face {
font-family: myFirstFont;
srcurl(sansation_bold.woff);
font-weight: bold;
}

Where the source URL would reference the actual font on your server’s file system.  The advantage to @font-face is that it’s natively supported by most browsers and so the fonts are loaded/rendered very quickly and for the most part look consistent from browser-to-browser.  The downside is that since the font is installed on your server, you need to make sure that you have the proper license for the font to be in copyright compliance (and some of the licenses can be surprisingly expensive).

Hosted Fonts by a Third Party Provider

Yet another option is to use a font hosting provider.  In this scenario the font is hosted in the cloud at a third party provider.  Your website references that font remtely and embeds it into the HTML of the site.  The font is referenced via a URL in the <head> section of your web document such as this:

<meta charset=”utf-8“>
<meta name=”description” content=”description”>
<link href=”http://fonts.googleapis.com/css?family=Average|Courgette” rel=”stylesheet” type=”text/css“>

In this case, the font is being hosted at Google Web Fonts.  Then, we would reference the font in the CSS which would look something like this:

h1 {
font: 400 45px/0.5 ‘Courgette’, Helvetica, sans-serif;
}

p {
font: 400 14px/1.5 ‘Average’, Times, serif;
}

Hosted fonts can also be implemented via a javascript method and also by using the @import rule in CSS.  There are a number of resources where you can get free hosted fonts such as Google Fonts and Font Squirrel and also services such as FontKit and FontsLive where you can subscribe to which will handle the licensing and the hosting of the font.

What’s the Best Option?

Choosing the right option for presenting fonts in your website depends on a number of criteria such as the uniqueness of the font/design, your budget for licensing fonts, technical capabilities for implementation, and considerations for SEO.  The good news is that as today’s options for web fonts continue to grow, they provide developers and designers with flexibility that was not available back when web design had to be dictated by the use of “web safe” fonts.  We recommend involving your developer and designer in a conversation early in the process to discuss the goals of the site with respect to fonts, and the various options.  Your developer should be able to then recommend the best approach for you based on these factors.

2018-07-16T23:40:13+00:00March 17th, 2015|Web Development|