1

It's all about the fonts

CSS3's @font-face gives the designer the ability to layout beautiful typography with out the use of graphics by using custom fonts that are not stored on the visitors computer and without having to resort to sIFR Flash technology to accomplish the task. @font-face syntax is fairly straight forward. It's a bit more effort than using a web safe font, but worth the trouble. Lets take a look at the syntax. As with any HTML style @font-face can be declared in the head of your document or in an attached stylesheet. 

  1. @font-face {
  2. font-family: 'AIFragmentRegular';
  3. src: url('fonts/aifragme-webfont.eot');
  4. src: local('☺'), url('fonts/aifragme-webfont.woff') format('woff'), url('fonts/aifragme-webfont.ttf') format('truetype'), url('fonts/aifragme-webfont.svg#webfontjSlPgmJV') format('svg');
  5. }

Lets Break it down

Line 1 opens the @font-face declaration

Line 2 is the the font-family declaration. 'AIFragmentRegular' designates the family type. In this example we have only chosen to display the 'regular' version of the custom font. If we want to display it bold, italic or some other variation we would need to build each variation separately. The remaining lines indicate the type of font and where it can be accessed. In our case they are located in a folder called "fonts" in the same directory as the CSS file we have linked to the page. You will notice the syntax is similar to how we call a background image.

Moving on to line 3 we have src: url('fonts/aifragme-webfont.eot'); This is required for the font to work on IE. No web design would be complete if it didn't require some work around for IE to play nice. 

Line 4 you will note a Smily Face. This icon is The OpenType spec prevents the users machine from using a localized font that may be of the same name. Following the smily face are the remainder of font types made available for browser compatibility. We all recognize .TTF, but what about .WOFF and .SVG? .WOFF is a newly created format supported in FireFox and .SVG is necessary mobile webkit browsers. It should be noted that even though .SVG is supported on mobile browsers CSS Letter-spacing is not.

Making @font-face Work For You

Now that we have established our fonts and where to find them we can move onto something more familiar. Using the custom fonts in a web design is identical to how we would select and style a web safe font. The example below ties together what we did above with a live demonstration.

  1. @font-face {
  2. font-family: 'AIFragmentRegular';
  3. src: url('fonts/aifragme-webfont.eot');
  4. src: local('☺'), url('fonts/aifragme-webfont.woff') format('woff'), url('fonts/aifragme-webfont.ttf') format('truetype'), url('fonts/aifragme-webfont.svg#webfontjSlPgmJV') format('svg');
  5. }

  7. .demo {
  8. font:4em 'AIFragmentRegular';
  9. color:#666;
  10. }

  12. TYPOGRAPHY
TYPOGRAPHY

More CSS Text Effects

Have A Question About Custom Web Fonts and @font-face?

Custom fonts can be tricky business so if you have a question about @font-face let us know. We are a Shenzhen, China web design company who actively participates in the development community. We are always happy to help those who need it. So if you have a question about @font-face leave us a comment below.

Let's get started!

Let's get into contact so you learn more about us and we can create solutions for you!