Sites with @font-face

Posted on March 26th, 2011

At first, we were limited to a common, but very small set of “web safe” fonts. Anything beyond those fonts, we had to rely on images. Images for text not only meant we had to create and maintain dozens (if not hundreds) of images, but it introduced accessibility issues.

During the same time people were struggling with font alternatives, the CSS 2 specification introduced @font-face as a way to link to actual font files via CSS:

@font-face {

    font-family: "ChunkFiveRegular";

src: url('Chunkfive-webfont.ttf') format("truetype");

}
 And then utilize those specified fonts in style declarations:

h1 {
    font-family: "ChunkFiveRegular", serif;}
}

Tags: , , ,