How to turn your fonts cross-browser compatible wih Font-Face generator

All it takes is few clicks with Font-Face generator to turn your fonts cross-browser compatible

Long gone were the days when a few recognized system fonts used to do rounds on all the websites. These days a couple of carefully selected good web fonts work together as the heart of any website you apply them on. Trust me! Irrespective of the content you put on your website/blog, good fonts speak by themselves, they portray your ideas and your website’s purpose. Further CSS with its set of additional font properties (like: font-style, font-size/line-height, font-weight) does the job of providing the freedom of speech to the font family (typeface) you use.

Let’s say you have made a cool website with nice vectors, beautiful high quality images, eye catching colour scheme and a carefully picked typeface. There was a time when most of the font-families were not cross-browser compatible. For example: if you have used your custom font-family, then the browser compatible with might have displayed it as it is, however the incompatible browser would have replaced those fonts with alternative or default fonts.

At that moment the work and the efforts you put into portraying your image would have gone into vain and your website would have been screwed. Thanks to W3C (the face behind CSS), the latest variations of CSS includes a font-face rule that allows you to use the fonts of your choice straight from the server over your website, with the possibility of having the same font installed on the website visitor equal to negligible. Almost all of the popular web-browsers with the latest versions lend their support to font-face which means the font-family you used on your website will look the same in Chrome as well as Firefox or any other web-browser.

Wait! Before we move further let’s clear some basics here.

You might have been trying to fix the pieces of puzzle inside your brain saying, “What’s the difference between a web font or font-face?”, Are they the same or two different font categories?” Well, it’s obvious to put yourself in that debate as I myself got stuck into.

Actually, yes there are two font categories and the one is web fonts but the other is apparently not font-face, its system fonts (there are many other names to it as well). As I said in the beginning there was a time when system fonts like “Arial”, “Times New Roman” and some others used to rule the web but all of a sudden everything on a webpage started becoming more creative and eye catching, that even the fonts couldn’t resist. The Web designers started using custom fonts (now referred to as web fonts) instead of system fonts because the custom fonts offered more style and variation alongside matching to their website design and concept than the system fonts do.

As said “Good things come at a price”, it applied to the web fonts too. With different font formats available, not all the web browsers had support for all the font formats, the result was a dull or not as expected appearance of text on non-supporting browsers because of the fonts getting replaced by alternative or system fonts.

To overcome the odds, Font-Face came into existence in 1998 with CSS2 along the idea to allow the web developers to apply their custom fonts on the text directly via server through the CSS file, without having the same fonts installed on the client side but the popular web browser of that period again limited their web font support to a single format only (.eot). This led to removal of the Font-Face rule from the CSS2.1 but it was later re-inducted with CSS3 and at present all the web browsers support most of the font formats.

The most popular web-browser supported font-face formats are TTF/OTF and WOFF. However, others like WOFF2, SVG and EOT are least supported.

TTF/OTF: The abbreviation goes as True Type Font and Open Type Font. TTF being founded by Apple and Microsoft in 1980’s is the most common font format used all over. While OTF actually based on TTF is entirely registered to Microsoft. All the major browsers namely Chrome, Firefox, Opera, Microsoft Edge and IE lend their support.

WOFF: With the name Web Open Font Format founded by Mozilla in 2009, created for the web is also supported by all the web browsers. It is the compressed version of TTF and OTF made to load faster.

WOFF2: A revision is to the previous WOFF with improved compression and the 2nd generation Web Open Font Format is not yet supported by the latest Microsoft browsers and Apple’s Safari. However, Chrome, Firefox and Opera do support it. However, WOFF2 is made to replace WOFF and it will slowly.

SVG: Stands for Scalable Vector Graphics used to display text in the form of vectors is only supported by Chrome, Safari and Opera web-browsers.

EOT: Embedded Open Type font format developed by Microsoft is unfortunately supported by Microsoft web-browsers only (Edge and Internet Explorer).

How to turn your fonts cross-browser compatible wih Font-Face generator

If the typeface to be used on your website is in either WOFF or any other format and you want to make sure it remains cross-browser compatible, then you must have to generate the font-face for it. There might be many guides available over the internet on how to convert the file formats via command line but you can put them all aside and do it the easy way with few mouse clicks.

You can check-out the font-face generator tool on www.flaticon.com.

With the font face generator tool at flaticon.com, you can simply drag and drop your font file onto the browser window or alternatively browse in your system and then upload them.

In return you will be provided with a zip file containing your font file in multiple formats along a demo html file and all the CSS done for you.

The html file contains the CSS code and the instructions for applying the generated font-face on your website. So now you are good to go, just follow the instructions and boom from now on, no worries about how the text on your website will look on other browsers.

Since, as I assume you are done with fonts and then with the content, you might want to check-out some icons as well that will point towards the main features of your website. For that you can still continue surfing on flaticon.com, get the icons of your choice and that too for free, just a link back is required as a form of appreciation.

All for your ease of use, you can also download the Flaticon app for Mac OS X or alternatively download the extension for your favourite Adobe Application (Photoshop, Illustrator, After Effects).

Both app and the extension allows you to directly search and grab all the icon packs from flaticon.com without the need of visiting through web-browser.

That’s all, if you like what you read or have something to add or correct do share your opinion in the comments below.