Web designers have been constrained to use a limited number of safe-fonts due to the dependence of being available on various computers and operating systems. CSS3 changed that by introducing a feature that allows you to use any font for your website.
The new property is: @font-face
HOW CAN I USE THIS?
Let’s see now how can you take advantage of this. In order to be able to use this CSS3 property, you must complete the following 3 steps:
1.Upload the font to your server
Just open your FTP tool and upload the font to your server and note the location. If you don’t have a fun font to use for your website then you could try:
2.Define it in your CSS file
@font-face {
font-family: 'FontName';
src: url(‘your-path/font.eot’);
src: local('?'), url('font.woff') format('woff'), url('font.ttf') format('truetype'), url('font.svg#webfont57ztNrX6') format('svg');
}
Just make sure that you change “your-path” with the exact location of your font.
As you noticed, there are multiple font sources defined, as ttf, eot and svg.
- TTF – Works in most browsers except IE and iPhone.
- EOT – IE only.
- WOFF – Compressed, emerging standard.
- SVG – iPhone/iPad.
3.Properly use it
h1
{
font-family: 'FontName', Arial, sans-serif;
}
Using this method you should be able to now use new and unique fonts on your website (instead of needing to photoshop images and insert them).