How on earth do they do these fonts?

[silas]

Hi,

Please can someone work out & explain how the fonts are done on this site? .... Ive been trying to work it out for ages & just cant fathom it.

Welcome to Marie Catribs

I havent got Steinem bold on my system, but it still seems to display ok ... HEEELLPPP.

:icon_scared:

Thanks v much

Silas

[djb]

I’ve never heard of it before but there’s some kind of embedding going on, I found the following lines in the CSS:

@font-face {
  font-family: "Steinem Roman";
  src: url("fonts/Steinem/STEINEM_.eot");
  src: local("Steinem Roman"), local("Steinem"), url("fonts/Steinem/STEINEM_.woff") format("woff"), url("fonts/Steinem/STEINEM_.ttf") format("truetype"), url("fonts/Steinem/STEINEM_.svg#Steinem") format("svg"); }

@font-face {
  font-family: "Steinem RomanItalic";
  src: url("fonts/Steinem/STEINEMI.eot");
  src: local("Steinem RomanItalic"), local("Steinem-Italic"), url("fonts/Steinem/STEINEMI.woff") format("woff"), url("fonts/Steinem/STEINEMI.ttf") format("truetype"), url("fonts/Steinem/STEINEMI.svg#Steinem-Italic") format("svg"); }

@font-face {
  font-family: "Steinem Bold";
  src: url("fonts/Steinem/STEINEMB.eot");
  src: local("Steinem Bold"), local("Steinem-Bold"), url("fonts/Steinem/STEINEMB.woff") format("woff"), url("fonts/Steinem/STEINEMB.ttf") format("truetype"), url("fonts/Steinem/STEINEMB.svg#Steinem-Bold") format("svg"); }

@font-face {
  font-family: "Steinem BoldItalic";
  src: url("fonts/Steinem/STEINBI_.eot");
  src: local("Steinem BoldItalic"), local("Steinem-BoldItalic"), url("fonts/Steinem/STEINBI_.woff") format("woff"), url("fonts/Steinem/STEINBI_.ttf") format("truetype"), url("fonts/Steinem/STEINBI_.svg#Steinem-BoldItalic") format("svg"); }

If you do a search for embedding fonts in css there are a load of tutorials on it. Let me know how you get on!

[sthomas]

There are lots of font embedding options available for websites. The site in question uses the Font Face method @font-face

Thanks

[DarkCloud]

how widely supported is @font-face?

ie. which browsers support it?

[sthomas]

Here's an article from .net Magazine which talk about web fonts and @font-face in more detail:

The future of web fonts - .net magazine

Cheers

[Corrosive]

how widely supported is @font-face?

ie. which browsers support it?

Here is the place to get all your CSS3 info; Compatibility Table – Fonts module - CSS3 . Info