Embedding fonts using @font-face

I had previously been using a cufon font plugin for rendering some fonts on a website. Cufon fonts use html5 canvas to draw each character of the font to before displaying it so there is a delay in rendering which looks untidy. Cufon fonts display fine on a desktop but render very poorly on retina devices such as iPhones and so I wanted to try embedding the font on the website using @font-face.
This as it turns out is a very simple process.

To generate webfont files from a true type font you can type ‘webfont generator’ into google search and choose from one of the many resulting applications.
Once you have the webfont files from the app upload them to a directory on your server.

The @font-face declaration in your css file includes the font-family; ‘font_to_add’ in the example below, the path/s of the font relative to the css file you are adding the code to and optional other font properties.

@font-face {
  font-family: 'font_to_add';
  src: url("font/font_to_add.eot"); /* IE9 Compat Modes */
  src: url("font/font_to_add.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
       url("font/font_to_add.woff2") format('woff2'), /* Very Modern Browsers */
       url("font/font_to_add.woff") format('woff'), /* Modern Browsers */
       url("font/font_to_add.ttf") format('truetype'), /* Safari, Android, iOS */
       url("font/font_to_add.svg#madd") format('svg'); /* Legacy iOS */
  font-weight: normal;
  font-style: normal;
}

You can then add css declarations for the new font like this:

body {
  font-family: 'font_to_add', fallback-font, sans-serif;
}

Share this