ansaurus

Question

Embed font in webpage

Answer 1

A:

AFAIK, font embedding using pure CSS is not really supported by most browsers (yet).

Other solutions exists, though. If you don't mind using javascript, check out cufon, which uses SVG/VML to render whatever font in most web browsers used today (even IE6).

Jørn Schou-Rode 2009-09-05 09:42:10

Answer 2

+1 A:

This isn't really something you can, or should do. The majority of the web has settled on some basic fonts (serif, sans-serif etc) and it is then up to the browser to decide. You can specify multiple fonts and have the browser downgrade if it isn't available:

font-family: Kingthings Italique, sans-serif

This is probably the best strategy, if people have the font it will display, otherwise it will become a generic font.

Jamie Lewis 2009-09-05 09:42:57

Answer 3

A:

Font embedding using CSS is not supposed to work in modern web browsers. More precisely, font embedding using CSS was part of CSS2 and was supported by some browsers, but retracted in CSS2.1 (and actually also removed from the CSS2 current specification).

Expect a comeback of font support with CSS3 when browsers start supporting that. Firefox 3.5, Opera 10 and Safari are expected to support CSS3 style font-embedding using TTF fonts, Chrome does not feature Safari's support for CSS3 font embedding for some reason.

Your problem in rendering your font on IE8 may be related to the fact that the second font-face declaration defines the same font-family as the first - and thus overrides it - but does not declare any eot fonts that IE can use.

I suggest you use a single font-face definition such as;

@font-face 
{
    font-family: 'Kingthings Italique';
    src: local('Kingthings Italique Regular'),
         local('KingthingsItalique-Regular'),
         url('Kingthings_Italique.eot'),
         url('Kingthings_Italique.ttf') format('truetype');
}

Then IE can try to use the eot font first. Other browsers (but not Chrome apparently) will try to use the eot, then fall back to the ttf rendering. This of course assumes that IE can handle the "alternative sources" definition, which I'm not sure it does - the @font-face documentation in MSDN does not make a reference to that.

Guss 2009-09-05 10:23:55

Answer 4

+1 A:

Although using @font-face is still not recommended due to lack of widespread support, there is a way to use custom fonts in modern browsers (most of them). However don't forget to provide backup solution for graceful degradation in older browsers.

Anyway, you should check this tutorial for more details.

Krule 2009-09-05 13:23:55

Answer 5

A:

First of all, try to use absolute paths:

url('/Kingthings_Italique.ttf')

<link href="/StyleSheet.css" rel="stylesheet" type="text/css" />

Sergey Kovalev 2009-09-05 16:30:04

Answer 6

+1 A:

In order for the embedded font feature to work (in browsers supporting it) you've also got to apply the new font-family to a style selector.

For instance

h1 { 
  @font-face {
 font-family: CustomFont;
 src: url('CustomFont.ttf');
  }
}

won't do the trick, even though it will indeed load a font (if it's a valid URL) -- because all we've done is load the font. We still need to actually apply it, so

@font-face {
  font-family: CustomFont;
  src: url('CustomFont.ttf');
}

h1 {
  font-family: CustomFont;
}

both loads the custom font and applies it to your CSS selector (in this example, h1).

You'll almost certainly want to read a tutorial about @font-face (Krule has already suggested a good one above with links to free fonts which can be used with it.) Ditto to all the warnings above about graceful degeneration, as this is still not a universally supported feature.

Joe 2009-09-23 00:13:04

Answer 7

A:

I think You should have only one @font-face declaration with many sources for one font-family. It looks IE doesn't like your declaration. The code from mentioned article ( http://randsco.com/index.php/2009/07/04/cross_browser_font_embedding ):

@font-face {
        font-family: " your FontName ";  
        src: url( /location/of/font/FontFileName.eot ); /* IE */  
        src: local(" real FontName "), url( /location/of/font/FontFileName.ttf ) format("truetype"); /* non-IE */  
}  

/* THEN use like you would any other font */  
.yourFontName {
        font-family:" your FontName ", verdana, helvetica, sans-serif;  
}

The first source should be for EOT file. The second source should be for TTF file and start with local font name. It is some kind of hack. The second source attribute looks invalid for IE so this browser use the first. For other browsers both are valid, however only the last is used.

For converting TTF files to EOT I used this small programme: http://code.google.com/p/ttf2eot/

The method should be supported by following browsers:

Firefox 3.6 +
Internet Explorer 4 +
Opera 10.00 +
Chrome 4.0 +
Safari 3.1 +

I have done some test and it have been working for me. The Chrome 2 is probably too old.

Michas 2010-02-12 21:12:05

ansaurus

tags:

views:

answers:

Embed font in webpage

related questions