You’re creating a website for yourself or a new client of yours and you feel that the font face needs an edge to it, it needs to stand out yet the default fonts that are used throughout all browsers don’t cut it? CSS3 allows you to now add custom fonts to websites to allow you to have more flexibility on the website you are creating.
Internet Explorer only supports EOT
Mozilla browsers support OTF and TTF
Safari and Opera support OTF, TTF and SVG
Chrome supports TTF and SVG.
This means that if you want to use a font on your website and you want it to be compatible on all browsers, make sure you have the correct files.
Below is the code for implementing the font face. This code needs to be placed either in the style section within the header or an external CSS page.
font-family: Sansation; <!– Here is what you are calling the font. You will need to use this name when relating to the font –>
src: url(‘font/Sansation_Light.ttf’), <!– First link to a font file, then followed by a comma –>
url(‘font/Sansation_Light.eot’); <!– Internet Explorer file –>
Make sure that if you are uploading the website to an external server, make sure that the files are published aswell to the correct place otherwise the font’s will not work
When you have done that, now choose where you want to use the font. This is how it should look in the style / CSS file.
font-family: Sansation, Arial, Sans-serif;
Always make sure that the font has a fall back font. If the user is using an old browser that may not be compatible with these new fonts, having a fall back font will allow the website to still look consistent and not use a different font-family i.e. custom font being sans-serif, no fallback font could lead to a serif font.
Hope this has helped you today!