About About Site Page

The purpose of the About Site page is to give you an overall idea about SERNLabs, or may be not. Okay, I know you have had enough of that! But the feature I tried out on this page is the CSS @font-face tag.

Keywords: @font-faceembed fontsfontsAbout SernlabsTypewriterHandwriting

The Code

The @font-face tag allows you to embed your own fonts into the webpage. Fonts on the web have always been a tricky affair. You might use the most attractive of fonts while designing the page, but if the same font is not available on the user's machine, then the browser will replace it with a font it deems fit. Not a very good prospect for a carefully designed page. The @font-face tag can fix that.

The @font-face tag syntax I have used is pretty simple:

@font-face {
    font-family: 'TravelingTypewriter';
    src: url('../fonts/TravelingTypewriter.eot');
    src: url('../fonts/TravelingTypewriter.eot?#iefix') format('embedded-opentype'),
         url('../fonts/TravelingTypewriter.ttf') format('truetype');
}
@font-face {
    font-family: 'honey';
    src: url('../fonts/honey.eot');
    src: url('../fonts/honey.eot?#iefix') format('embedded-opentype'),
         url('../fonts/honey.ttf') format('truetype');
}
The core syntax is even simpler actually:
@font-face {
    font-family: 'TravelingTypewriter';
    src: url('TravelingTypewriter.otf');
}

But there are issues with Cross-browser compatiability that need the additional lines of code. Those issues are documented here, Webfonts.info - @font-face Browser Support .

Fear not though, dealing with cross-browser compatiable @font-face tags is made very easy by this wonderful tool, Font Squirrel - @font-face generator . Another resource I found particulary helpful is Randsco.com - How @font-face Works: Easy Peasy . As always, googling @font-face remains your best bet.


The Design

About the Design aspect of the page, I wanted a clean design to offset the craziness of the text that it was supposed to contain. The colour theme is similar to the Homepage so as not to immediately shock users. The sidebar font was supposed to reflect my actual handwriting, but I just could not find anything bad enough!


External Links


About Page