...

View Full Version : How do I make available some of the font-family on my web site ?



jasonpc1
07-23-2011, 03:57 PM
I am using a few font-family on my pages that are not available to everyone so it seems.

For example

'Broardway' is not on vista for Firefox and shows a some standard style instead.

I have the .ttf file in a fonts folder on my site but do not know how to link then to the text ?

BluePanther
07-23-2011, 05:29 PM
With CSS, you can use @font-face to define custom fonts.
http://www.css3.info/preview/web-fonts-with-font-face/

If you're just using standard fonts, you can define the one's you want to use in font-family in order of preference - separating them with commas.

SB65
07-24-2011, 07:30 AM
Have a look at http://www.fontsquirrel.com/ for an easy way to generate what you need - specifically creating the non standard eot format required for IE.

jasonpc1
07-24-2011, 07:48 AM
With CSS, you can use @font-face to define custom fonts.
http://www.css3.info/preview/web-fonts-with-font-face/

If you're just using standard fonts, you can define the one's you want to use in font-family in order of preference - separating them with commas.


I see that the sites source code shows

<pre>@font-face {
font-family: Delicious;
src: url('Delicious-Roman.otf');
}

@font-face {
font-family: Delicious;
font-weight: bold;
src: url('Delicious-Bold.otf');
}</pre>


Can I not just use the style.css file I have ?

BluePanther
07-24-2011, 08:20 AM
Yeah, just add @font-face element to your existing style.css and it should work fine.

jasonpc1
07-24-2011, 09:20 AM
Yeah, just add @font-face element to your existing style.css and it should work fine.

yep that work, but it is not allowing me to print with this font, using firefox 5.0, it is printing the fonts in IE though !

BluePanther
07-24-2011, 09:33 AM
There must be an error in your code then, as font face is supported by all major browsers. w3schools.com/cssref/css3_pr_font-face_rule.asp

can you post your current css code?

Apostropartheid
07-24-2011, 12:57 PM
There must be an error in your code then, as font face is supported by all major browsers. w3schools.com/cssref/css3_pr_font-face_rule.asp

can you post your current css code?

@font-face is, but not all font files.

WOFF files should cover IE9+ and Firefox 3.6, EOT IE4-8, and TTFs (substantially smaller than OTFs) Chrome and Firefox < 3.6

BluePanther
07-24-2011, 01:44 PM
@font-face is, but not all font files.

WOFF files should cover IE9+ and Firefox 3.6, EOT IE4-8, and TTFs (substantially smaller than OTFs) Chrome and Firefox < 3.6

That's similar to W3Schools summary, except they make no hint towards ttf being depreciated? And also no hint towards eot being depreciated for IE.

Apostropartheid
07-24-2011, 09:06 PM
That's similar to W3Schools summary, except they make no hint towards ttf being depreciated? And also no hint towards eot being depreciated for IE.

depreciate does not mean deprecated (just FYI)

TTFs are not deprecated, nor are EOTs; both will work in modern browsers (sorry if I didn't make that clear.) The OP was just using a straight OTF, which is why I drew specific attention to filetypes.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum