PHP, CSS, HTML and other web code stuff

CSS3 How To: Use Extended Fonts with @font-face Property

CSS3 How To: Extended Fonts with @Font-Face Property

The @font-face property marks a revolution in web design, and is now supported by all modern browsers – it allows you to choose from a vast range of different typefaces for your website. Before the @font-face property was introduced, there was no simple and safe way to do this. The stark choice was to either stick with a very small set of ‘safe’ fonts that everyone used, or to use images for your exotic typeography, or to resort to various hacks. Now it is easy.

@font-face Syntax

The correct syntax is:

@rule-name {
    font-family: "Font Name";
    src: url(fontfilename.ext) format('formatname');

FontFace Kits

FontSquirrel.com provides a fantastic all-in-one solution. You can download pre-prepared ‘FontFace Kits’ for a huge selection of typefaces, which contain the font in several different formats to cater for all browsers, plus a ready made CSS file containing all the necessary work-arounds to deal with individual browser quirks.

It also has a FontFace Generator which allows you to upload your own font and have it automatically packaged into a ‘FontFace Kit’.

To use this on your website, all you need to do is upload the FontFace Kit, link to it’s CSS file, and then apply the font family to the required page elements on your site.

This entry was posted in CSS, CSS3. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • Hello

    My name is Vin. I'm a coder who is interested in discovering the best ways to do things on the web. With a little bit of thought, we can do lots of interesting things, and it often isn't nearly as hard as one might think.

    This site is my chance to share with you what I've learned.