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”.
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;}
– get post updates by subscribing to our e-mail list
– share on social media :