@font-face: define a new font and use it on your site even its not implemented as default in web browsers and operating systems.

Actually at first glance i guessed this feature is CSS3 but its Not exactly a feature which is new to CSS3, @font-face was first proposed for CSS2 and you can implement it with cross-browser compatibility.

This guide will teach you how to implement @font-face with cross-browser compatibility:

1. Select the font you want to use, you can use owned font or you can download it from website, i recommend this two: Font Squirrel and Fontex These sites both provide tons of great resources absolutely free and even share many of the same font choices.

after you get the font go to : Font Generator

This website helps you generated font format files that you will need to support cross browsers and platforms.

2. Click Add fonts and select font that you want to upload.

3. if the font you want to use for English and Latin languages, you will need to select OPTIMAL option, but if the font for Arabic, you will need to select EXPERT and then from the advanced options make sure that you select (No Subsetting), this option for other languages.
4. check option (Yes, the fonts I’m uploading are legally eligible for web embedding.) then click download your kit.

5. the file you will download contain the generated font files and css code you will need to use, it will be something like this:

@font-face {
font-family: ‘GESSTwoLightRegular’;
src: url(‘ge_ss_two_light-webfont.eot’);
src: url(‘ge_ss_two_light-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘ge_ss_two_light-webfont.woff’) format(‘woff’),
url(‘ge_ss_two_light-webfont.ttf’) format(‘truetype’);
font-weight: normal;
font-style: normal;
}

move your font files to directory you want (.ttf, .eot, .woff), make sure change the url of the fonts, like this example:

@font-face {
font-family: ‘GESSTwoLightRegular’;
src: url(‘/fonts/ge_ss_two_light-webfont.eot’);
src: url(‘/fonts/ge_ss_two_light-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘/fonts/ge_ss_two_light-webfont.woff’) format(‘woff’),
url(‘/fonts/ge_ss_two_light-webfont.ttf’) format(‘truetype’);
font-weight: normal;
font-style: normal;
}

make sure If the font file is located at a different domain, use a full URL instead:

src: url(‘http://www.google.com/fonts/ge_ss_two_light-webfont.ttf’).

and there is important point:

You can’t use @font-face in Firefox with a font hosted on a different domain, so the solution: If you want to specify a font for @font-face using an absolute URL, or a font hosted on a different domain, it needs to be served with Access Control Headers, specifically the Access-Control-Allow-Origin header set to ‘*’ or the domains allowed to request the font. This also applies to fonts hosted on a different sub-domain.

6. all you need now is to add your font name like for example:

body {
font-family: ‘GESSTwoLightRegular’, Arial, tahoma, ….;
}

Now you should be able to see this font in the browser.

Have Fun 🙂

Leave a Comment