Skip navigation
Currently Being Moderated

Installing Webfonts

Jul 24, 2012 2:03 AM

I downloaded a free webfont from Fontspring and followed their instructions, as best as I could, they're a bit unclear for the first timer. and the font is not loading in my browser.  Here's the code I used:

 

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" p { font-family: 'MyWebFont', SecondaMediumRegular; }/>

 

<style type="text/css">

 

@font-face {

    font-family: 'SecondaMediumRegular';

    src: url('Seconda-Medium-webfont.eot');

    src: url('Seconda-Medium-webfont.eot?#iefix') format('embedded-opentype'),

         url('Seconda-Medium-webfont.woff') format('woff'),

         url('Seconda-Medium-webfont.ttf') format('truetype'),

         url('Seconda-Medium-webfont.svg#SecondaMediumRegular') format('svg');

    font-weight: normal;

    font-style: normal;

 

}

 

body {

 

   

#text { position:absolute;

left:10px; top:10px;

width:300px;

height:30px;

z-index:1;

font-family: SecondaMediumRegular;

font-size:12px;

font-weight:bold;

color:#a76d2f;

line-height:140%;

word-spacing:1px;

}

 

Here are their instructions: file:///Users/REN/Desktop/TAV_cafe/site/web%20fonts/how_to_use_webfon ts.html

 

What have I missed??

 
Replies
  • Currently Being Moderated
    Jul 24, 2012 2:27 AM   in reply to Renskins

    You have a css selector mixed up in the link to your stylesheet:

     

    This:

     

    <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" p { font-family: 'MyWebFont', SecondaMediumRegular; }/>

     

    Should be this:

     

    <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

     

    And this:

     

    p { font-family: 'MyWebFont', SecondaMediumRegular; }

     

    Should be:

     

    p { font-family: SecondaMediumRegular, arial, verdana, sans serif; }

     

     

     

     

    Also have you uploaded your font files into your web directory where the path to them says they should be: src: url('Seconda-Medium-webfont.eot');

     

     

    <style type="text/css">

     

    @font-face {

        font-family: 'SecondaMediumRegular';

        src: url('Seconda-Medium-webfont.eot');

        src: url('Seconda-Medium-webfont.eot?#iefix') format('embedded-opentype'),

             url('Seconda-Medium-webfont.woff') format('woff'),

             url('Seconda-Medium-webfont.ttf') format('truetype'),

             url('Seconda-Medium-webfont.svg#SecondaMediumRegular') format('svg');

        font-weight: normal;

        font-style: normal;

     

    }

    </style>

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 24, 2012 2:41 AM   in reply to Renskins

    Renskins wrote:

     

    Thanks

     

    where does this go?

     

    p { font-family: SecondaMediumRegular, arial, verdana, sans serif; }

     

     

    In your linked css file - stylesheet.css.

     

    Renskins wrote:

     

     

     

    sorry i'm a learner...(I have put the webfonts folder in the same directory as everything else for the website, html pages etc.

     

    What is the name of your webfonts folder?

     

    You will have to include the name of the folder in the url path where your .eot, .woff, .ttf and .svg file reside.

     

    So if the webfonts folder name is 'Seconda':

     

     

    @font-face {

        font-family: 'SecondaMediumRegular';

        src: url('Seconda/Seconda-Medium-webfont.eot');

        src: url('Seconda/Seconda-Medium-webfont.eot?#iefix') format('embedded-opentype'),

             url('Seconda/Seconda-Medium-webfont.woff') format('woff'),

             url('Seconda/Seconda-Medium-webfont.ttf') format('truetype'),

             url('Seconda/Seconda-Medium-webfont.svg#SecondaMediumRegular') format('svg');

        font-weight: normal;

        font-style: normal;

     

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 24, 2012 3:01 AM   in reply to Renskins

    What happens if you copy ALL the code below paste it into a new Dreamweaver document save it to your site folder and then view it in a browser?

     

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>Untitled Document</title>

     

    <style type="text/css">

     

    @font-face {

    font-family: 'SecondaMediumRegular';

    src: url('webfonts/seconda_medium_macroman/Seconda-Medium-webfont.eot');

    src: url('webfonts/seconda_medium_macroman/Seconda-Medium-webfont.eot?#ief ix') format('embedded-opentype');

    src: url('webfonts/seconda_medium_macroman/Seconda-Medium-webfont.woff') format('woff');

    src: url('webfonts/seconda_medium_macroman/Seconda-Medium-webfont.ttf') format('truetype');

    src: url('webfonts/seconda_medium_macroman/Seconda-Medium-webfont.svg#Seco ndaMediumRegular') format('svg');

    font-weight: normal;

    font-style: normal;

    }

     

     

    #text { position:absolute;

    left:10px; top:10px;

    width:300px;

    z-index:1;

    font-family:SecondaMediumRegular;

    font-size:12px;

    font-weight:bold;

    color:#a76d2f;

    line-height:140%;

    word-spacing:1px;

    }

    </style>

    </head>

     

    <body>

    <div id="text"><p>This is some text</p></div>

    </body>

    </html>

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 24, 2012 4:39 AM   in reply to osgood_

    Can you give it one more go using the code below:

     

    IF your font files are in the folder named 'seconda_medium_macroman' which is in the folder named 'webfonts' and the 'webfonts' folder is directly sitting in your site folder the below will work.

     

     

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>Untitled Document</title>

    <style>

    @font-face {

        font-family: 'SecondaMediumRegular';

        src: url('webfonts/seconda_medium_macroman/Seconda-Medium-webfont.eot');

        src: url('webfonts/seconda_medium_macroman/Seconda-Medium-webfont.eot?#ief ix') format('embedded-opentype'),

             url('webfonts/seconda_medium_macroman/Seconda-Medium-webfont.woff') format('woff'),

             url('webfonts/seconda_medium_macroman/Seconda-Medium-webfont.ttf') format('truetype'),

             url('webfonts/seconda_medium_macroman/Seconda-Medium-webfont.svg#Seco ndaMediumRegular') format('svg');

        font-weight: normal;

        font-style: normal;

     

    }

    h1 {

    font-family: SecondaMediumRegular;

    font-size: 50px;

    color:#36C;

    }

    </style>

    </head>

     

    <body>

    <h1>Your name goes here</h1>

    </body>

    </html>

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 24, 2012 8:11 AM   in reply to osgood_

    If the location and everything is correct as osgood_ has mentioned but it's still not working, try adding quotes around the font name in the styles - this is standard practice when linking to a non-standard web font.

     

    h1 {

    font-family: "SecondaMediumRegular";

    font-size: 50px;

    color:#36C;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 24, 2012 8:16 AM   in reply to Rik Ramsay

    I believe the only time a font family name requires quotes is when there are spaces, and that would be for standard as well as non-standard ones, e.g.,

     

    "Times New Roman" vs verdana

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 25, 2012 11:44 PM   in reply to Renskins

    Renskins wrote:

     

     

    for instance, i actually want to use skia, but skia is only compatible with macs, unless I bought the webfont of the net for $40, which I don't want to do.  is there anyway I can set the font to skia and then make the default one of the free webfonts I have downloaded so that mac users will see the original design but non-mac users will see something slightly different but similar?

     

    Sure, I don't know what Skia is and I dont think I have it on my Mac, maybe, but I'm unaware of it.

     

    If you want Skia to be the default option then set it first in the font-family list:

     

    #text { position:absolute;

    left:10px; top:10px;

    width:300px;

    z-index:1;

    font-family: skia, SecondaMediumRegular;

    font-size:12px;

    font-weight:bold;

    color:#a76d2f;

    line-height:140%;

    word-spacing:1px;

    }

     

    Those users without Skia will see SecondaMediumRegular

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points