Web font – how to use a special font in your website

The easiest way to use Web Fonts in your website

CSS @font-face rule, a way of linking to TrueType (TTF) and OpenType fonts (EOT) to your website text documents.

About Browser Support of Web Fonts : Safari has supported this type of font linking since version 3.1, and Opera has announced that they plan to support it in Opera 10. Firefox 3.5 onwards only downloads the fonts as needed, so a stylesheet can list a whole set of fonts of which only a select few will actually be used.

Some Idea : You may think you need to install a font to see it in your browser. But you can see any font in your browser supplied from server side of a website. Most of the modern browsers supports this technique.

Step 1 : Firstly get fonts in TTF and EOT format for all browser support

Mozilla Firefox, Google Chrome, Opera and Apple Safari will all support True-Type (.ttf) fonts. Unfortunately, Microsoft Internet Explorer does not support the TrueType font format.

In order for your font to be visible in all browsers, you will need to convert your font to OpenType (.eot), and have both the .ttf and .eot files available on your server.

Convert TTF to EOT by this website if you donot have both FILE FORMATs. Another web converter here TTF to EOT

Step 2: Upload the TTF and EOT files to your server in a FONT directory

Step 3: Write your CSS

To incorporate the custom font, we shall use the @font-face attribute in CSS3. This is now a widely-supported specification across all modern browsers.

@font-face 
{
font-family: 'mySpecialFont';
src: url('fonts/FontFile.eot'); /* For Internet Explorer 6+ */
} @font-face
{
font-family: 'mySpecialFont';
src: url('fonts/mySpecialFontFile.ttf'); /* For non-IE browsers */
}

Notice how the @font-face is added twice to ensure that the font is visible in Internet Explorer and the non-IE browers by providing a link to both the .ttf and .eot files.

Now write the CSS code to use this Font in a CSS class as follows:

.specialFont 
{
font-family: 'mySpecialFont',Arial,Serif; font-size: 1em;
}

In the above example, I have used a common ‘web-safe’ font Arial after my special font, called mySpecialFont.Now use it in your webpage as follows:

<p class="specialFont">This is my Custom Font</p>

You can download good FREE WEB FONTs here : Fontex and FontSquirrel


Method 2

Using @font-face for font linking is relatively easy. In a stylesheet e.g stylesheet.css, each @font-face rule defines a font family name to be used, the font resource to be loaded, and the style characteristics of a given face such as whether it’s bold or italic.

You can download web fonts from : Google Webfont

/* CSS Code for web fonts to be placed in a stylesheet file */

@font-face
{
font-family: Simonetta;
src: url(Simonetta-Regular.ttf) format(“opentype”);
}

body {
font-family: Simonetta, sans-serif;
}

/* CSS Code ends */

Browsers supporting @font-face will render text using Simonetta font, while older browsers will render text using the default sans-serif face.


  • What about to use the font style : regular, bold, italic and bold italic
  • Most font families today consist of : regular, bold, italic and bold italic.
  • To define each of these faces the font-weight and font-style descriptors are used. These define the style of the face; there’s no concept of a cascade or inheritance that applies here.
  • Without an explicit definition each of these defaults to a value of ‘normal’:

@font-face
{
font-family: Simonetta;
src: url(Simonetta-Regular.ttf);

/* font-weight, font-style ==> default to normal */
}

@font-face {
font-family: Simonetta;
src: url(Simonetta-Italic.ttf);
font-style: italic;
}

body {
font-family: Simonetta, Times New Roman, serif;
}

Reference Reading :



About the Author : Mr Bikram Choudhury is the author of this article, you can reach him in Google+. Professionally he is the technical adviser of RiG SEO Service providing search engine optimization service for global customers. Also he is a PHP Programmer and Web Designer himself and provides consultancy for lots of websites. You can contact him for Guest Posting also.