While coming up with one web page,
I thought of using some good fonts to grab attention. So I started weighing my
options.
1) You could either choose to host your own system
fonts onto your web server. And use this to get it onto your web page
@font-face {
font-family:
"MyAwesomeFont";
src:
url("http://mywebsite.com/MyAwesomeFont.ttf");
}
body {
font-family: " MyAwesomeFont
", serif
}
But this sounds very old and not trendy enough. We are in
the age of clouds and CDN’s. Hosting static content on your server is passé.
2) The next option is to make use of an online font
library. Two big names here, “Typekit” by Adobe and “Google Web Fonts” by elgooG.
Typekit being a paid service, I started diving into GWF.
Head over to http://www.google.com/fonts.
Choose a couple of fonts you like, review your collection and start using them
right away.
There are 3 ways to implement the chosen fonts onto your
page.
1)
The standard approach by using <link href=””>
2)
Using @import url()
3)
Using Google WebFont Loader
You can find the actual code snippets for the above 3 methods on google.com/fonts.
After that you can have this(below) to get it working,
body {
font-family: "MyAwesomeFont1",
“MyAwesomeFont2”, Arail, serif
}
Always have a couple of fallback fonts on your font-family declaration. The order in which the fonts are declared here decides which font to use when the preceding font is not found. In this case, it will fall back to a system default serif font if none of the other 3 fonts are found.
The terms serif and sans-serif are not actual fonts as such, but refer to generic font families. This image should help you in case you’ve never heard of serif or sans-serif.
The great Steve Jobs learned typography. You can see that
reflecting in the designs that apple has come up with. The i(Mac/ Pod/ Phone)
are all built with quality in mind. The same reflects in their UI. Each app
that gets published on iTunes undergoes a lot of quality control checks. For
more info on these https://developer.apple.com/appstore/guidelines.html
Ok, so I was happy after all these awesome fonts on my page.
But then connectivity started breaking down. The fonts were not getting loaded
at just the right moment. The result, the browser shows the text initially in a
default font and once the font is actually available (downloaded and ready) it
swaps the font. What I just witnessed was a FOUT(Flash of Unstyled Text).
