CSS3 @font-face Styling

The new @font-face selector allows us to use fonts that may not be on the client computer. Much like any other resource file, they are downloaded to the client browser as needed.

Mozilla Firefox, Google Chrome, Safari, Opera all work with TrueType (.ttf) font files. Internet Exlorer 9 will only work with Embedded OpenType (.eot) font files. There are free online converters on the web if you do not have the required format on hand.

If you want to include bold text, you will have to include the bold versions of any fonts that you wish to use.

These paragraphs will display in MS Comic Sans font if you are using a supported browser, otherwise they will display in one of the other listed fonts.

You can copy the page html from the textarea below and save it to your local system.