How to load external fonts into an HTML document?

Question

How to 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

Answer 1

Take a look at this A List Apart article . Matching CSS:

@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 noted in the comments, you can make it work with IE if you convert the font to the format

Answer 2

Paul Ireland has a way to do this, which covers most common problems. Check out his article with bulletproof @ font-face :

The last option, which stops unnecessary data from loading IE and works in IE8, Firefox, Opera, Safari and Chrome, looks like this:

 @font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('Graublau Web Regular'), local('Graublau Web'), url("GraublauWeb.woff") format("woff"), url("GraublauWeb.otf") format("opentype"), url("GraublauWeb.svg#grablau") format("svg"); } 

He also refers to generator , which translates fonts into all necessary formats.

As others have already pointed out, this will only work in the latest generation of browsers. It’s best to use this in combination with something like Cufon and download only Cufon if the browser does not support @font-face .

Answer 3

CSS3 offers a way to do this using the @ font-face rule.

http://www.w3.org/TR/css3-webfonts/#the-font-face-rule

http://www.css3.info/preview/web-fonts-with-font-face/

Here are a few different ways that will work in browsers that do not support the @ font-face rule.

Answer 4

Regarding Jay Stevens' answer: "Fonts available for use in an HTML file must be present on the user computer and accessible from a web browser, so if you do not want to distribute the fonts to the user machine through a separate external process, this cannot be done." It's true.

But there is another way to use javascript / canvas / flash - cufon gives a very good solution: http://cufon.shoqolate.com/generate/ library, which generates very simple to use external fonts.

Answer 5

If you want to support more browsers than the CSS3 fantasy, you can look at the cufon javascript library in the open source library

And here is the API if you want to do more funky things.

Major Pro: Allows you to do what you want / need.

Major Con: prohibits text selection in some browsers, so use matches headings (but you can use it on all your sites if you want)

Answer 6

Microsoft has its own CSS method for incorporating embedded fonts ( http://msdn.microsoft.com/en-us/library/ms533034(VS.85).aspx ), but this is probably not recommended.

I used sIFR , since it works fine - it uses Javascript and Flash to dynamically replace plain text with some Flash information, the same text in the desired font (the font is embedded in the Flash file). This does not affect the markup around the text (it works using the CSS class), you can still select the text, and if the user does not have Flash or is disabled, he will gracefully deform the text in any font you specify in CSS (for example, Arial) .

Answer 7

try it

 <style> @font-face { font-family: Roboto Bold Condensed; src: url(fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf); } @font-face { font-family:Roboto Condensed; src: url(fonts/Roboto_Condensed/RobotoCondensed-Regular.tff); } div1{ font-family:Roboto Bold Condensed; } div2{ font-family:Roboto Condensed; } </style> <div id='div1' >This is Sample text</div> <div id='div2' >This is Sample text</div> 

Answer 8

I have not seen links to Raphael.js. So I thought I'd turn it on here. Raphael.js is fully backward compatible with IE5 and very early Firefox, as well as all other browsers. He uses SVG when possible, and VML when he cannot. What you do with it is to paint on canvas. Some browsers even allow you to select the text that is generated. Raphael.js can be found here:

http://raphaeljs.com/

It can be as simple as creating a drawing area for your document by specifying the font, font size, size, etc., and then telling it to put your line of text on paper. I’m not sure if it concerns licensing issues or not, but he draws the text, so I’m sure that he circumvented licensing issues. But consult with your attorney. :-)