Search code examples
htmlcssfontsfont-face

How to add some non-standard font to a website?


Is there a way to add some custom font on a website without using images, Flash or some other graphics?

For example, I was working on a wedding website, and I found a lot of nice fonts for that subject. But I can't find the right way to add that font on the server. And how do I include that font with CSS into the HTML? Is this possible to do without graphics?


Solution

  • This could be done via CSS:

    <style type="text/css">
    @font-face {
        font-family: "My Custom Font";
        src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
    }
    p.customfont { 
        font-family: "My Custom Font", Verdana, Tahoma;
    }
    </style>
    <p class="customfont">Hello world!</p>
    

    It is supported for all of the regular browsers if you use TrueType-Fonts (TTF), the Web Open Font Format (WOFF) or Embedded Opentype (EOT).