•  21-09-2019
  •  | 
  •  

Question

Ive googled alot trying to figure out how to embed fonts on a webpage. As i understand it you should upload the fonts to your webpage in .ttf and .eot formats. and the use @font-face in a stylesheet.

I have placed the Kingthings_Italique.eot and Kingthings_Italique.ttf in the root of my webpage.

Createt a stylesheet like this.

.MyStyle
{   
    /* For IE */
    @font-face 
    {
        font-family: 'Kingthings Italique';
        src: url('Kingthings_Italique.eot');
    }

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

First i refer to it like this

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

And the i try to use it like this

<asp:Label ID="lbl" runat="server" Font-Bold="True" 
        Font-Size="30pt" Text="TEST123" CssClass="MyStyle"></asp:Label>

But no matter if i use ie8 or chrome2 the font isnt changed.

If I understand http://randsco.com/?p=680&more=1&c=1 correct it should be possible

If I open the source in ie8 should I then be able to see the font name? because if I search for king through the ie8 code i find nothing

Was it helpful?

Solution

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.

OTHER TIPS

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.

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.

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).

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.

First of all, try to use absolute paths:

url('/Kingthings_Italique.ttf')

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

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.

You will need to blocks to support embedded fonts in both IE and non-IE browsers.

The IE block will need to come second and be contained within an IE selector comment.

For example:

<style type="text/css">
     @font-face
     {
          font-family: 'myFont';
          src: url('/location/of/myFont.ttf');
     }
</style>

This will work for all modern browsers except IE (firefox, safari, chrome, etc...) Now to get IE to behave you will need the following:

<!--[if IE]>
<style type="text/css">
     @font-face
     {
          font-family: 'myFont';
          src: url('/location/of/myFont.eot');
     }
</style>
<![endif]-->

The comment if statement is only read by IE since IE 5 and on. This is great for giving IE special instructions. To the other browsers it's just some commented out text that does not get rendered.

If you do not have a .eot format of your .ttf font then you can go to the following url http://www.kirsle.net/wizards/ttf2eot.cgi It's really easy to use and generates the .eot font for you in seconds.

+1 if you like my answer. Comment if you think I need to improve something :)

I recognize this question is rather old, but there is now a great font API from google that one can <link> to: https://developers.google.com/webfonts/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top