How do I load external fonts into an HTML document

Question

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

User · Accepted Answer

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.

User · Answer

I did not see any reference to Raphael js   So I thought I d include it here   Raphael js is backwards compatible all the way back to IE5 and a very early Firefox as well as all of the rest of the browsers   It uses SVG when it can and VML when it can not   What you do with it is to draw onto a canvas   Some browsers will even let you select the text that is generated   Raphael js can be found here   http   raphaeljs com   It can be as simple as creating your paper drawing area  specifying the font  font-weight  size  etc    and then telling it to put your string of text onto the paper   I am not sure if it gets around the licensing issues or not but it is drawing the text so I m fairly certain it does circumvent the licensing issues   But check with your lawyer to be sure   -

User · Answer

If you want to support more browsers than the CSS3 fancy  you can look at the open source library cufon javascript library  And here is the API  if you want to do more funky stuff   Major Pro  Allows you to do what you want   need   Major Con  Disallows text selection in some browsers  so use is appropiate on header texts  but you can use it in all your site if you want

User · Answer

Paul Irish has a way to do this that covers most of the common problems   See his bullet-proof  font-face article   The final variant  which stops unnecessary data from being downloaded by 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 links to a generator that will translate the fonts into all the formats you need   As others have already specified  this will only work in the latest generation of browsers   Your best bet is to use this in conjunction with something like Cufon  and only load Cufon if the browser doesn t support  font-face

User · Answer

Regarding Jay Stevens answer   The fonts available to use in an HTML file have to be present on the user s machine and accessible from the web browser  so unless you want to distribute the fonts to the user s machine via a separate external process  it can t be done   That s true   But there is another way using javascript   canvas   flash - very good solution gives cufon  http   cufon shoqolate com generate  library that generates a very easy to use external fonts methods

User · Answer

Try this   lt style gt   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     lt  style gt   lt div id  div1   gt This is Sample text lt  div gt   lt div id  div2   gt This is Sample text lt  div gt

User · Answer

CSS3 offers a way to do it with 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 is a number of different ways which will work in browsers that don t support the  font-face rule

User · Answer

Microsoft have a proprietary CSS method of including embedded fonts  http   msdn microsoft com en-us library ms533034 VS 85  aspx   but this probably shouldn t be recommended   I ve used sIFR before as this works great - it uses Javascript and Flash to dynamically replace normal text with some Flash containing the same text in the font you want  the font is embedded in a Flash file   This does not affect the markup around the text  it works by using a CSS class   you can still select the text  and if the user doesn t have Flash or has it disabled  it will degrade gracefully to the text in whatever font you specify in CSS  e g  Arial

[html] How do I load external fonts into an HTML document?

Examples related to html

Examples related to fonts