Cross browser compatible fonts


by - posted

Cross browser compatible fonts can be implemented in 3 main ways. You can follow “the traditional way”, or using “fonts from Yahoo and Google” or using “the @font-face rule”.

cross browser compatible fontsA) The traditional way

The traditional way to assure cross browser compatibility with fonts is to use one of the 3 font families with a fallback mechanism.

The 3 font families are :

  • The Serif fonts (“Times New Roman”, Times, serif, etc)
  • The Sans-serif fonts (Arial, Helvetica, sans-serif, etc)
  • The Monospace fonts (“Courier New”, Courier, monospace, etc)

Example

body
{
font-family:"Times new Roman", Times, "Nimbus Roman No9 L", serif;
font-style: normal;
font-weight: normal;
font-size: 100%;
}

B) Fonts from Yahoo and Google top of page

B1) Yahoo

Source : http://yuilibrary.com/yui/docs/cssfonts/

Example

<link rel=”stylesheet” type=”text/css”href=”http://yui.yahooapis.com/3.14.1/build/cssfonts/cssfonts-min.css”>
The Yahoos default is Arial, with a fallback.

If you define another font family, you have do it in the traditional way, like :
body {font-family:”Times new Roman”, Times, “Nimbus Roman No9 L”, serif;}

The Yahoo solution is not W3C valid, because of the asterisks (*) in the CSS code.

B2) Google

Source : https://developers.google.com/fonts/

Google has 3 implementation mechanisms :

  • The standard way
  • The @import way
  • The JavaScript way

The Google Fonts API will generate the necessary browser-specific CSS to use the fonts. So the fallback is ensured.

The standard way

<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Average">
</head>

body {font-family: 'Average'; }

The @import way

@import url('http://fonts.googleapis.com/css?family=Open+Sans');

body {font-family: 'Open Sans'; }

If it is a single word font, just include the font name after the family=… if it is two words add a plus sign between each word.

Example (Times New Roman replacement)

The standard way :
<link href='http://fonts.googleapis.com/css?family=Tinos' rel='stylesheet' type='text/css'>

body {font-family: 'Tinos', serif;}

The @import way :
@import url(http://fonts.googleapis.com/css?family=Tinos);

body {font-family: 'Tinos', serif;}

C) The @font-face rule top of page

@font-face is a CSS rule which allows you to embed a particular (custom) font from a server to render in a Webpage.

You have to download a free Web font. This font has then to be converted in different formats in order to have a cross browser compatible font.

Free Web fonts : http://www.fontsquirrel.com/tools/webfont-generator

Converter : http://everythingfonts.com/font-face

The converter transforms any .ttf (TrueType Font) or .otf (OpenType Font) file to .ttf, .otf, .eot, .woff and .svg files.
It also creates a CSS file and a demo HTML file to show you how to use Web fonts on your Website.

Browser (font) file formats :

  • Internet Explorer only supports EOT
  • Mozilla browsers support OTF and TTF Safari and Opera support OTF, TTF and SVG
  • Chrome supports TTF and SVG
  • Safari on the iPad and iPhone require SVG

Basic implementation (example)

@font-face {
font-family: DeliciousRoman;
src: url(http://yourDomain/Delicious-Roman.otf);
font-style: normal;
font-weight: normal;
font-size: 100%;
}

body {font-family: DeliciousRoman, Helvetica, Arial, sans-serif;}

Cross browser compatible implementation (example)

@font-face {
font-family: "Your font";
src: url("type/filename.eot");
src: local("☺"),
url("type/filename.woff") format("woff"),
url("type/filename.otf") format("opentype"),
url("type/filename.svg#filename") format("svg");
font-style: normal;
font-weight: normal;
font-size: 100%;
}

body {font-family: "Your font", Georgia, serif;}

If you enjoyed this article, you can :
– get post updates by connecting to our RSS feed
– get post updates by subscribing to our e-mail list
– share on social media :

Leave a comment