You are here:Home»KB»Web Design»Embed Fonts in Webpages (Web fonts)
Friday, 19 December 2008 18:36

Embed Fonts in Webpages (Web fonts)

Written by

You can now use many types of fonts on your website you are not limited to 'websafe' fonts anymore.

Old Technology:

  • Typeface
  • sIFR
  • FLIR
  • Cufón
  • Typekit
  • Microsoft EOT (but still used)

New Technology:

  • @font-face (CSS3)
  • Google Web Fonts
  • Font Squirrel (more an implementation method)

Although you can still use the old technologies there seems really no point as now CSS3 supports native web fonts via @font-face. With the CSS declaration you can specify your own font to be used and have this present on your web server so the browser can download it and then use it.

Browsers implementation varies on what fonts it will allow to be embedded. See this link for a list of which browsers support which embedded font.

Google Web Fonts
Because there are many different browsers out there and they do not all support CSS3 fully Google came up with an interesting solution, Google Web Fonts. This works by you creating a CSS style sheet reference to a dynamic URL, Google would then work out what browser you were using and send the appropriate CSS files to the browser. It is possible via a certain combination of CSS declarations using different types of online fonts files to support all browsers but Google's web fonts API does the hard work for you and sends a specific CSS files to your browser.

The syntax looks like this: {code class='brush: html;'}{/code}Then, in your style sheet, you can apply that font to any body element. For example: {code class='brush: css;'}h1 { font-family: 'Font Name', serif; }{/code}

Google’s new Font API will work in any browser that supports @font-face (which is pretty much all of them).

Here are some examples of the different CSS delivered to the different browsers:

{code class='brush: css;'} /* Webpage Call */ /*using ie6 - emulated in ie9 so possible not working properely */ @font-face { font-family: 'Dancing Script'; font-style: normal; font-weight: normal; src: url('http://themes.googleusercontent.com/font?kit=DK0eTGXiZjN6yA8zAEyM2WrfpCc_r9-5ZnZPBmoO4Sk'); src: local('Dancing Script'), local('DancingScript'), url('http://themes.googleusercontent.com/font?kit=DK0eTGXiZjN6yA8zAEyM2VhlQWQpSCpzb2Peu3I-Q34') format('woff'); } /* using ie7 */ @font-face { font-family: 'Dancing Script'; font-style: normal; font-weight: normal; src: url('http://themes.googleusercontent.com/static/fonts/dancingscript/v0/DK0eTGXiZjN6yA8zAEyM2WrfpCc_r9-5ZnZPBmoO4Sk.eot'); src: local('Dancing Script'), local('DancingScript'), url('http://themes.googleusercontent.com/static/fonts/dancingscript/v0/DK0eTGXiZjN6yA8zAEyM2VhlQWQpSCpzb2Peu3I-Q34.woff') format('woff'); } /* using ie9 */ @font-face { font-family: 'Dancing Script'; font-style: normal; font-weight: normal; src: url('http://themes.googleusercontent.com/static/fonts/dancingscript/v0/DK0eTGXiZjN6yA8zAEyM2WrfpCc_r9-5ZnZPBmoO4Sk.eot'); src: local('Dancing Script'), local('DancingScript'), url('http://themes.googleusercontent.com/static/fonts/dancingscript/v0/DK0eTGXiZjN6yA8zAEyM2VhlQWQpSCpzb2Peu3I-Q34.woff') format('woff'); } /* using firefox 3.5 */ @font-face { font-family: 'Dancing Script'; font-style: normal; font-weight: normal; src: local('Dancing Script'), local('DancingScript'), url('http://themes.googleusercontent.com/font?kit=DK0eTGXiZjN6yA8zAEyM2VhlQWQpSCpzb2Peu3I-Q34') format('woff'); } {/code}

See this page for more info on how Google Web Fonts Works. Easy Custom Web Typography with Google Fonts API

Font Squirrel (website)

Font Squirrel allows you to create your own font pack for embedding fonts, this service is all free.

The people at font squirrel figured out that using a certain arrangement of CSS declarations and different online font files that you could support all web browsers, so unlike Google which sends a specific CSS file dynamically these declarations in the pack support all browsers in one go. There is a slight perfomance overhead but you can embed the files locally and use you own fonts rather than just the ones of goolge web fonts directory.

There is an online font generator at Font Squirrel to make your own packs with relative ease. They come with all the required fonts, CSS and HTML you need.

Here is an example of the CSS code in a font pack:

{code class='brush: css;'} @font-face { font-family: 'CloisterBlackLight'; src: url('CloisterBlack-webfont.eot'); src: url('CloisterBlack-webfont.eot?#iefix') format('embedded-opentype'), url('CloisterBlack-webfont.woff') format('woff'), url('CloisterBlack-webfont.ttf') format('truetype'), url('CloisterBlack-webfont.svg#CloisterBlackLight') format('svg'); font-weight: normal; font-style: normal; } {/code}

Typeface.js

Advantages:

  • User doesn’t have to have Flash plugin installed on their browser
  • Easier to create with just a few lines of Javascript
  • For page loading it just needs to load the Javascript

Disadvantages:

  • Text is not selectable because it outputs it like an image. I looked at some examples, right clicked on a word and had to view as an image. Every single word had this behaviour. Big thumbs down.
  • Usage for body copy will slow down loading time, so it is recommended to use only for headlines.
  • Cannot be read by screen readers
  • Visual looks blurry
  • Not all browser compliant and still has a lot of development left to be done

sIFR

Advantages:

  • Can be read by screen readers as a normal headline because it is a behaviour layer on top of the markup and styling.
  • Text is selectable
  • SEO friendly
  • Displays text as is like any other web font. Crisp and not blurry!
  • Has addons like jQuery sIFR Plugin!

Disadvantages:

  • Requires Javascript to be enabled
  • Flash plugin must be installed in the browser
  • Need Adobe Flash Studio to create it BUT there is a pretty nifty sIFR generator that creates the file for you!
  • For page loading, it has to request for Flash, Javascript and CSS files attached to it, which can potentially get bogged down if you are using sIFR in too many places.
  • Cannot display on an iPhone. Yet…

Cufón (similar to Typeface.js)

Enter Cufón, the Javascript-based font replacement solution which makes heavy use of canvas and VML. This offers a great alternative to other solutions out there - no Flash or images required.

There are some issues with using Cufón on a live site, the most notable being the inability to highlight and copy/paste text, which is really the biggest issue for your site's users.

Combine that with the EULA issues, which prevent you from being able to legally embed fonts in Javascript files for most fonts on the market today.

The other issue is knowing what fonts can be used with Cufón. For sIFR, most fonts are fair game, since the font is embedded in a Flash movie, which is typically an approved usage by most font foundries for most fonts. With Cufón, the Javascript files used for the font can be easily "stolen" and either used on another website or reverse engineered.

Typekit

Typekit is a commercial venture where you use their own javascript to implement web fonts from their libarary. Typekit offers access to a library of over 4,000 commercial fonts of professional quality. Typekit is currently the only source offering these high-quality typefaces for legal use on the web.
 

Other Resources:


 

Read 1248 times Last modified on Thursday, 03 December 2015 19:41
Published in Web Design
back to top