Making “@font-face” Cross Browser Compatible
@Font-face is a CSS3 property that allows you to embed any font and use it on your website. It was actually introduced with CSS2, but only supported by Internet Explorer with EOT (Embedded Open Type) font files.
Nowadays “@font-face” can be used on all major browsers, but you will need to follow this easy process.
Support
Process
One thing you must keep in mind before following this process is that many fonts are licensed, and you must buy them to obtain the rights to use them. Please do not use a licensed font if you haven’t purchased it.
You can find hundreds of downloadable free fonts on the web to use on your website.
First, you need to convert your font file and generate files with all the different extensions. For this you can use several tools; in this particular example we will use a tool provided here:
Click on “Add Fonts”
Browse for the font file on your file system
Once your font completes the upload, click the “Download Your Kit” button.
Extract the file contents to any folder you want. You should have the following files:
Now you need to declare the font on your project’s CSS. Open the stylesheet.css file with any editor. You will see that all the required styles are provided. Copy those styles to your project’s CSS.
Copy all the font files generated (.eot, .woff, .ttf, .svg) to whatever directory you want on your project and make sure that the paths to the font files are correct.
Once you’ve done this, you’re ready to use your new font cross-browser. Just use any CSS selector and apply the “font-family” property. Use the exact same name as the declaration.
It is also a good idea to provide fall back content in case the browser does not support this property. In this particular case we have 3 fallback options: the first is “Helvetica”, the second “Arial”, and the third is “sans-serif”.
Conclusion
The desired cross-browser @font-face CAN be achieved! It will require some effort, but it’s totally worth it and you’ll be very happy with the results.
My only recommendation is to be sure that the font you picked is 100% readable, and that you won’t harm the user’s experience.
Enjoy!
