4. A way to define fallback fonts
I am in “love” with people abusing quotation marks.
ideal common
font‐family: Didot, Garamond, "Times New Roman", serif;
alternative generic
6. Fonts existing on 95% of PCs
Arial
Arial Comic Sans
Black
Courier
New
Georgia Impact
Palatino
Lucida Sans Tahoma
Linotype
Times New Trebuchet MS
Roman Verdana
7. So, we’ve had to come up
with some workarounds.
(old-school methods)
11. None of them was perfect
✦ poor accessibility
✦ broken built-in browser search
✦ inability to use live translating tools (Google
Translate)
✦ much decreased styling abilities
17. Use web font hosting services
popular, the simplest to use personal (free) and paid accounts
small, curated set of freely licensed fonts wide range of fonts, mobile support
over 10000 fonts to choose from annual fee
extensive localization support doesn’t support desktop use
More: http://sprungmarker.de/wp-content/uploads/webfont-services/
At the beginning I will say that I am not a native english speaker, not a typographer.\n\nI am, though, a web designer & developer from Krakow.\n
Please raise your hands: how many of you know what is a CSS font stack?\n
CSS Fonts is a way to define fonts that are displayed if our desired font isn’t installed in users’ machine.\nIt defines the preferred order of “back up” fonts to use.\nIt should always end with a generic font-family.\n
Web designers are often constrained by the so called “Web Safe Fonts” when creating web pages and whilst 95% of machines worldwide now have these fonts, they were first packaged with Windows XP back in 2001.\n
These fonts exist on 95% of the machines. Of course it varies basing on the Operating System.\nAlso, devices like iPhone / iPad have much limited font set as well.\nYou will probably agree with me that these fonts are plainly overused.\n
\n
In early 2000s, we used various ways of image replacement. They could be generated dynamically to serve custom text and avoid generating it in advance.\nProblems with: transparency\n
Then, Mike Davidson basing on the work of Shaun Inman published sIFR, a way to embed custom fonts to sites using Flash.\nThis solved a problem for some time, but the fonts couldn’t be used for body text. \nAlso, the flash text isn’t working for mobile devices.\n
In 2008, Cufon came out and designers were very excited about it again.\nUnfortunately, this solution based on HTML Canvas, which is just a hack.\n
\n
\n
Here is the new CSS3 syntax for embedding the fonts.\n
There are 4 different types of formats for various browsers: otf&ttf, svg, woff and eot.\nThese different formats were caused by the differences of the browser vendors politics.\n
Font Squirrel will let you get the generated files and the CSS ruleset\n
Unfortunately, there is a problem with licenses.\nEmbedding font via @font-face means anybody can download it even if the font license forbids it.\n
The solution: thankfully there are companies which will host the web fonts to you so you don’t have to care about the licensing problems.\nThe most popular are Google Web Fonts, Typekit, Fonts.com and Font Deck.\n
