While OTF actually based on TTF is entirely registered to Microsoft. ![]() TTF being founded by Apple and Microsoft in 1980’s is the most common font format used all over. TTF/OTF: The abbreviation goes as True Type Font and Open Type Font. However, others like WOFF2, SVG and EOT are least supported. ![]() The most popular web-browser supported font-face formats are TTF/OTF and WOFF. 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. 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). 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. 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.Īs said “Good things come at a price”, it applied to the web fonts too. 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. 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.Īctually, 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). Wait! Before we move further let’s clear some basics here. 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. 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. 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.Īt 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. ![]() There was a time when most of the font-families were not cross-browser compatible. 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. 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. 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. These days a couple of carefully selected good web fonts work together as the heart of any website you apply them on. Long gone were the days when a few recognized system fonts used to do rounds on all the websites. All it takes is few clicks with Font-Face generator to turn your fonts cross-browser compatible
0 Comments
Leave a Reply. |