Search code examples
htmlfonts

How do I load external fonts into an HTML document?

How do I load external font files into an HTML document.

Example: Make the text "blah blah blah blah blah blah blah" a custom font from a TTF file in the same directory using HTML CSS and/or JAVASCRIPT

Solution

  • Take a look at this A List Apart article. The pertinent CSS is:

    @font-face {
  font-family: "Kimberley";
  src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype");
}
h1 { font-family: "Kimberley", sans-serif }

    The above will work in Chrome/Safari/FireFox. As Paul D. Waite pointed out in the comments you can get it to work with IE if you convert the font to the EOT format.

    The good news is that this seems to degrade gracefully in older browsers, so as long as you're aware and comfortable with the fact that not all users will see the same font, it's safe to use.