Sweet Fonts
p(meta). 13 Nov 2010 - Fairbanks
My custom font provided by typekit pleased me, the little logo in the bottom right corner that showed up there because I’m using the free account not so much.
This inspired me to get educated as to what is going on here. The super short of it: TypeKit is providing: font licensing (actually rental), hosting, optimization for browsers (they make it go for IE).
This zeldman guy had some very well written explanations of things:
But it wasn’t until I ran across Richard Fink’s Web Fonts at the Crossing that I found the term for what TypeKit was. A “font hosting and obfuscation” service.
Finish reading Richard Fink’s article and find my gut reaction was correct “_this isn’t the right path for me_” but he provides the following happy points:
- There are thousands of fonts for free (open and legal).
- Google is hosting some of them - and providing an AJAX API to them
- FontSquirrel’s FontFace generator can take fonts you provide and prep them for usage
- The Google ajax api code here on GitHub - WebFont Loader - that must mean it is good stuff right?
The Google hosted are simple to get started with using their example code…see my font import test.
In the end, Julie and I sat down and looked through a variety of cool, free fonts available from fontsquirrel’s fontface kits and she picked out a replacement for my TypeKit font I was using. I made a backup of trying out jekyll to see what I was talking about with the TypeKit applied to the site.
Installation of one of those kits was fairly simple:
- put an unzipped copy of the font in my /fonts directory
- made a copy of stylesheet.css as require.css
- removed extra version of the font I did not plan on using from require.css
- Add the require.css to the header:
<link rel="stylesheet" href="/fonts/orbitron/require.css" type="text/css" media="screen, projection" /> - then reference it in my screen.css with:
font-family: 'OrbitronLight', Arial, sans-serif;
I am pleased.