Custom Font Face Generator - Elevate Your Typography

CSS Style

Font Family: Font Name:

CSS Preview

Font Face

{
    font-family: "Gill Sans";
    src: url("opensans".eot) format("eot"),
    url("opensans.woff") format("woff"),
    url("opensans.ttf") format("truetype");
}

CSS Font Face Maker

@font-face is a rule which allows defining online fonts to display text on their website. You can input the font you want the text to be and give a name to it.

The outcome gives you different formats for browser compatibility. Each browser has its own format.

Eot format is the only format that IE8 and below will recognize when using @font-face.

WOFF fonts often load faster than other formats because they use a compressed version of the structure used by OpenType (OTF) and TrueType (TTF) fonts.

The WOFF was created for the reaction of OpenType Font and TrueType Font because these formats could easily (and illegally) be copied. However, OpenType has capabilities that many designers might be interested in (ligatures and such).