• +62 (081) 322 209080
  • Choose your language:

Blog

Insights and ideas for software startups. We provide advice and insights for entrepreneurs.

font-face-css-3

CSS3 Non-Standard Fonts – How to with @font-face? Trick

Once upon a time, Webmasters deplored to be able to use very few fonts for their websites. Arial, Times New Roman… it was boring! However @font-face appeared and we can now use fancy Fonts and keep going the creativity. Here is how to use @font-face to set Non-Standard Fonts for your Website.

@font-face exists since quite a while from CSS 2.0 but only Internet Explorer implemented it since its version 4 (Yes, I’m not kidding…) but with  their own Fonts so it was not practical. Fortunately, we have now easy ways to overcome these problems.

Step 1: Get the necessary Font Formats

For this example we will use Quadranta Font which is free and available on Dafont.

We ill need this Font with .otf Format (OpenType Font). This format is used by Firefox, Chrome, Safari and Opera. However, it’s not recognized by MSIE and some smartphones browsers.

So in order to be complete, you will have to get also this Font with the Format .eot (Embedded OpenType, for MSIE) and .svg. The Format .ttf (TrueType Font, well known) and .woff (Web Open Format Font) which is getting popular.

Don’t Freak out! I know you’re wondering where you can get all these Formats… Surf to FontSquirrel, upload the font file and it will generate the other formats.

Here you go, we now have our quadranta.otf, quadranta.woff, quadranta.eot and quadranta.svg.

Best Practice: Make sure that the declaration of these fonts is made from the smaller size file to the heaviest weight (20 to 58KB for me).

Step 2: Copy/Paste this code in your stylesheet

FontSquirrel also provides you the CSS… Life’s simple sometimes… So order the the file format by size, replace the .ttf by the .otf and here is the code:

@font-face {
 font-family: 'quadranta';
 src: url('quadranta.eot');
 src: url('quadranta.otf') format('truetype'),
 url('quadranta.woff') format('woff'),
 url('quadranta.eot?#iefix') format('embedded-opentype'),
 url('quadranta.svg#QuadrantaBold') format('svg');
 font-weight: normal;
 font-style: normal;
 }

the name set by font-family is the name which will be used in the StyleSheet everywhere you need it.

the #QuadrantBold set for the Format .svg est used by the browsers to get the written in the svg file and it specify the path to follow. Don’t modify this entry ;)

Why do we have 2 declaration of .eot and different?
Well you know MSIE, it likes to makes things a little bit more complicated, otherwise it wouldn’t be funny…
It’s about performance, to not make MSIE load every formats (even the ones he doesn’t know) and then the new features of IE9, which understanf the .woff format which is lighter that we prefer to make him notice first. But in fact his declaration can be replaced by a single one:

url('quadranta.eot?') format ('eot')

Everything is in the ? and the declaration of format(‘eot’). If you want to know why it’s like that you can Google it, many websites will explain a better way than I do.

The final CSS will be like that:

@font-face {
 font-family: 'quadranta';
 src: url('quadranta.eot?') format('eot'),
 url('quadranta.otf') format('truetype'),
 url('quadranta.woff') format('woff'),
 url('quadranta.svg#QuadrantaBold') format('svg');
 font-weight: normal;
 font-style: normal;
 }
 h4 {
 font-family:quadranta, sans-serif;
 font-size:3em;
 }

Here you go, you can play with it now ;)

PS: Depending on the quality of the screen or the video card, the browser, the Operating System… the result can differs and not be really nice.
Consider that the files loaded are additional requests from the client browser so it makes you website slightly heavier.
Always make sure that the Font is readable. It’s great to be fancy but if we can’t read what is written there no point of that…

Let me know below if this post has been helpful for you and what is your favorite Font ?

Antoine Leboulanger…

Full time Entrepreneur, Startup enthusiast, designer, programmer, system and network admin, "Expert in Network and System Engineering", yeap it's written on his degree...