Tuesday, August 23, 2011

CSS3 Tutorial 6: Using Custom Fonts

In CSS3 you can specify the use of custom fonts. It doesn't matter if the person viewing the page doesn't have the font installed, You simply host the font online and use @font-face in your CSS to link to it! The code that you use is this:
@font-face {
font-family: [Custom font name];
src: url('[url to font]');
}
You can't use any fonts though, you have to use a special font format, You can generate them at http://cufon.shoqolate.com/generate/. To implement the new font you would use font-family like this:
h1 {
font-family: [CustomFontName], Arial;
}
Arial is there in case someone is using an outdated browser that doesn't support @font-face such as Internet Explorer. .otf format fonts are the most widely supported; It is supported by all browsers except Internet Explorer and Safari on the iPhone, You can use @font-face multiple times in your CSS document so you should also include .eot and .svg versions of the same font in your CSS so it is compatible with all browsers.

12 comments:

  1. Awesome, now I know how to use custom fonts.

    ReplyDelete
  2. i dont know much about coding, but this blog definately helps me when i practice with these great tips !

    ReplyDelete
  3. CCS3, making my web design dreams come true on a daily basis.

    ReplyDelete
  4. Neat, I didn't know you could host your own fonts. That makes it alot easier to custom your site.

    ReplyDelete
  5. Didn't think it would be so easy! Thanks a ton(:

    ReplyDelete
  6. Incredible how CS3 is still a valid program today!

    ReplyDelete