5/10/2023 0 Comments Free webfont generatorThe 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. It then generates a nice and easy-to-use stylesheet, i.e.All it takes is few clicks with Font-Face generator to turn your fonts cross-browser compatible It analyzes the font and normalizes their family names, subfamily names and even detects, if a font is italic or condensed. This is where my generator starts to show its magic. Would you want to write that everytime you want to use it in your CSS? This has the affect of most generators throwing out names like ‘dinpro-medium-600.ttf’. Many other fonts, including Open Sans, Proxima Nova and many others do the same. It always uses ‘Regular’ as its sub-family name and “DINPro-Medium”, “DINPro-Bold” etc. Every font normally has a family name (in DIN Pro’s case that would be DIN Pro), a sub-family (i.e. “Medium”) and a flag if it is italic. When generating a webfont, you often stumble upon silly font names. It looks way better than FontSquirrel’s and has a nice tweak: It automatically fixes fonts. But someday, FontSquirrel made ridiculous descision to limit the generator to only 4 files. I used their webfont generator and was quite happy with their output - except that I had to manually ‘fix’ the font names so I am able to use that font like a native one in my CSS.
0 Comments
Leave a Reply. |