Search

Joomla - Cross-Browser Personalised Web Fonts

Contents[Hide]

Joomla

Nowadays, site design is taking more and more importance. Before, sites were expected to provide information ... now they also have to be sexy. They can't hold that 90s look anymore. They need fancy design.

When you analyse what people like about a site page, one of the main thing is … nice fonts. Till date, web fonts were always on the dark side of the design, belonging to the same team : arial, times new roman, …

But one revolution has come few years back and is starting to spread all over the web : personalized web fonts.

With their help, your visitor will be able to display your site pages with the fonts displayed as you expect them to be displayed, whatever fonts are installed on their computer !

This guide will explain breafly how to setup your web site to use a font provided by a standard True Type Font (.ttf). This sentence is displayed using this technic.

Let's start.

1. Generate the font files

So, first thing is to find a nice True Type Font for your site.

One fantastic site to look for some nice fonts is http://www.dafont.com/   (thank you Fiona :-)

Once you've downloaded your font, you will need to convert it to 2 different formats :

  • WOFF : Web Open Font Format, used by most of the modern browsers, compatible with CSS3
  • EOT : Embedded Open Type, very open format, used only by Internet Explorer 6+

Why, would you ask ?

Because the world of Web browser is a little bit complicated :

  • Internet Explorer 6 to 8 knows only how to handle EOT fonts
  • Safari & Firefox 3.5 know how to handle TTF fonts
  • Firefow 3.6+ knows how to handle the new standard WOFF format
  • Internet Explorer 9 should be able to handle WOFF instead of EOT … but I've nothing to test it
  • ...

So to be on the safe side, we need to provide these 3 formats all together.

The easiest way to convert a .ttf file into these 2 other formats is to use a online converter : http://www.fontsquirrel.com/fontface/generator.

From that site, you can upload your .ttf file and you will get back a .zip file which contains differents formats, including EOT and WOFF.

2. Prepare your site

Once you have your .ttf, .eot and .woff files, you have to upload them to your site.

Then you need to create one CSS file which will declare one font class that will be associated with these 3 files.

The principle around these files is :

  1. If browser is IE, it will use the first declaration as it won't understand the next ones
  2. If a browser knows how to handle True Type Fonts, it will use the second declaration
  3. For any new browser understanding WOFF, the last declaration will be used

http://path/to/yourfontdeclaration.css

@font-face {
  font-family: yourfontname;
  src: url("http://path/to/yourfontname.eot") /* EOT file for IE */
}

@font-face {
font-family: yourfontname;
src: url("http://path/to/yourfontname.ttf") /* TTF file for Firefox 3.5, iPad, ... */
}

@font-face {
  font-family: yourfontname;
  src: url("http://path/to/yourfontname.woff") /* TTF file for Firefox 3.6+ & CSS3 compatible browsers */
}

Next, you need to include that CSS in your web site main page.

The declaration has to be declared just after the HEAD tag.

Your main page

...

 
...

If you are dealing with a Joomla template, you have to add your CSS include after the joomla specific tag

Your template index.php

...
<jdoc:include type="head"/>
<link rel="stylesheet" href="/path/to/yourfontdeclaration.css" type="text/css" >
...

Last but not least, you are just left with your pages design !

3. Write your pages

To use you new personnalised font, you just need to declare it as any other font in your CSS files :



.my_class {
...
font-family: yourfontname;
...
}

That's it.

Your new personnalised font should be properly displayed on most Web Browsers.
It as been succesfully tested on :

  • Firefox 3.6, 7 & 10
  • Chrome 14
  • Opera 11
  • iPad 1
  • Android 2.3 (Gingerbread)
  • Internet Explorer 8

Hope it helps !

Signature Technoblog

This article is published "as is", without any warranty that it will work for your specific need.
If you think this article needs some complement, or simply if you think it saved you lots of time & trouble,
just let me know at This email address is being protected from spambots. You need JavaScript enabled to view it.. Cheers !

icon linux icon debian icon apache icon mysql icon php icon piwik icon googleplus