Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How on earth do they do these fonts?

Discussion in 'Website Coding & Programming Forum:' started by silas, Nov 29, 2010.

  1. silas

    silas New Member


    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.


    Thanks v much

  2. djb

    djb Member

    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!
  3. sthomas

    sthomas Member

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

  4. DarkCloud

    DarkCloud New Member

    how widely supported is @font-face?

    ie. which browsers support it?
  5. sthomas

    sthomas Member

  6. Corrosive

    Corrosive Moderator Staff Member

Share This Page