HTML5 font-face

font-face is one of the best parts of HTML5.

As pointed out on the html5rocks guide to webfonts, the reason why you should use font-face over other methods like sIFR (Scalable Inman Flash Replacement, which used Flash and javascript) and cufon are:


 * Full searchability by Find (ctrl-F)
 * Accessibility to assistive technologies like screen readers (one day when you are old and greying you will be glad that people thought about accessibility on the internet)
 * Text is translatable, through in-browser translation or translation services
 * CSS has full ability to tweak the typographical display: line-height, letter-spacing, text-shadow, text-align, and selectors like ::first-letter and ::first-line

Example
The font-face class activity

Let's make a simple webpage with a well-formatted poem.


 * Pick a poem from one of these Edward Lear's poems (in public domain). If you don't want to use a random poem, you can also use your own article or text documents as the source material to be formatted.
 * Go to http://www.fontsquirrel.com/fontface/generator and get your font converted (Do note that it won't allow you to use fonts for which you do not have the licence! So don't go and try to upload a copyrighted font that you dont have permission to use or one that you downloaded off a totally random torrent/rapidshare/megaupload download because (1) they can tell if you try to upload a popular copyrighted font (2) its not legal to use fonts for which you don't have the licence. Its the same issue with using stock imagery that you do not own.
 * After you have found the right font and loaded it up, download your font kit.
 * Take a look at the sample that is included. Look at the code inside the page.
 * Format your poem with webfonts and the font-face property. For today's sample, please use at least TWO different fonts. Ideally use something like the h1 tag and format that in CSS!

"Why are the instructions so vague?" - Because at the end of the day, I won't be able to teach your everything about HTML5 since it is always changing. You will need to keep learning on your own as things develop, if you can understand the structure of how it works, then you will be able to progress from there later on! Think of it as a foundation for later things.

Read more about font-face at nicewebtype

See an example here: Fish poem

After you are done, run it through the HTML5 Validator (Alternative Validator here at Validator.nu) and try to see if you can edit it until you have no errors.

(You can also try running my fish poem through the validator to see if it has errors!)