Geek Answers Handbook

Embed a font on a web page

Ive googled alot is trying to figure out how to embed fonts on a web page. As I understand it, you should upload fonts to your web page in .ttf and .eot formats. and using @ font-face in the stylesheet.

I placed Kingthings_Italique.eot and Kingthings_Italique.ttf at the root of my web page.

Create a style sheet 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 as follows

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

And I'm trying 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 does not change.

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

If I open the source in ie8, should I see the font name? because if I search for a king through ie8 code, I find nothing

+6
css fonts font-face
source share
9 answers

For the embedded font to work (in browsers that support it), you also need to apply a new font family to the style selector.

for example

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

won't do the trick even if it really loads the font (if it's a valid URL) - because all we did is load the font. We still need to apply it, so

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

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

You will almost certainly want to read the tutorial on @ font-face (Krule has already suggested a good one above, with links to free fonts that you can use with it.) Also to all the warnings above about graceful degeneration, as this is not yet a universal function.

+8
source share

This is not something you can or should do. Most websites are based on some basic fonts (serif, sans-serif, etc.), and that is where the browser should decide. You can specify several fonts and lower the browser rating if it is not available:

 font-family: Kingthings Italique, sans-serif

This is probably the best strategy if people have a font that it displays, otherwise it will become a universal font.

+1
source share

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

In any case, you should check out this tutorial for more details.

+1
source share

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

There are other solutions. If you don't mind using javascript, check out cufon , which uses SVG / VML to display any font in most web browsers used today (even IE6).

0
source share

Embedding fonts using CSS should not work in modern web browsers. More precisely, embedding fonts using CSS was part of CSS2 and was supported by some browsers, but was removed in CSS2.1 (and actually also removed from the current CSS2 specification).

Expect font support to return with CSS3 when browsers start supporting it. Firefox 3.5, Opera 10, and Safari are supposed to support the insertion of CSS3 fonts using TTF fonts, Chrome for some reason does not support Safari support for embedding CSS3 fonts.

Your problem with rendering your font in IE8 may be because 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 may use.

I suggest you use one font definition, for example:

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

IE can then try to use the eot font first. Other browsers (but rather not Chrome) will try to use eot and then return to ttf rendering. This, of course, suggests that IE can handle the definition of "alternative sources", which I'm not sure what it does - the @ font-face documentation in MSDN does not refer to this.

0
source share

First of all, try using absolute paths:

 url('/Kingthings_Italique.ttf') <link href="/StyleSheet.css" rel="stylesheet" type="text/css" />
0
source share

I think you should only have one @ font-face declaration with many sources for the same font family. Looks like IE doesn't like your expression. Code from the specified 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 must be for the EOT file. The second source must be for the TTF file and start with the local font name. This is some kind of hack. The second source attribute looks invalid for IE, so this browser uses the first. For other browsers, both are valid, but only the latter is used.

To convert TTF files to EOT, I used this small program: http://code.google.com/p/ttf2eot/

The method must be supported by the following browsers:

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

I did some tests and it worked for me. Chrome 2 is probably too old.

0
source share

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

The IE block must be second and contained in the 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 make IE behave, you need the following:

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

The if if statement is read only by IE with IE 5 onwards. This is great for providing special IE instructions. For other browsers, this is just some commented text that is not displayed.

If you don’t have the .ef format of your .ttf format, you can go to the following URL http://www.kirsle.net/wizards/ttf2eot.cgi It is very easy to use and generates a .eot font for you in seconds .

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

0
source share

I understand that this question is quite old, but now Google has an excellent font API, which can be <link> to: https://developers.google.com/webfonts/

0
source share

More articles:


All Articles