13 Replies Latest reply: Jul 25, 2012 11:44 PM by osgood_ RSS

    Installing Webfonts

    Renskins Community Member

      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_webfonts.html

       

      What have I missed??

        • 1. Re: Installing Webfonts
          osgood_ MVP

          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>

          • 2. Re: Installing Webfonts
            Renskins Community Member

            Thanks

             

            where does this go?

             

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

             

            and I don't understand what you mean by this?

             

            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');

             

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

            • 3. Re: Installing Webfonts
              osgood_ MVP

              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;

               

              }

              • 4. Re: Installing Webfonts
                Renskins Community Member

                osgood_ wrote:

                 

                Renskins wrote:

                 

                Thanks

                 

                where does this go?

                 

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

                 

                 

                In your linked css file - stylesheet.css.

                 

                So where I had it before?

                 

                It's still not working.

                 

                I have this now:

                 

                 

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

                 

                 

                <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?#iefix') 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#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;

                }

                • 5. Re: Installing Webfonts
                  osgood_ MVP

                  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>

                  • 6. Re: Installing Webfonts
                    Renskins Community Member

                    It is using the default font, times new roman

                    • 7. Re: Installing Webfonts
                      Renskins Community Member

                      I even added another line of text but in times to compare them and it definitely is times not seconda

                      • 8. Re: Installing Webfonts
                        osgood_ MVP

                        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>

                        • 9. Re: Installing Webfonts
                          Rik Ramsay Community Member

                          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;

                          }

                          • 10. Re: Installing Webfonts
                            MurraySummers ACP/MVPs

                            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

                            • 11. Re: Installing Webfonts
                              Renskins Community Member

                              Didn't work, it's still using times as the default.  I used your exact code in a fresh html file.  I checked the folder names and it's all correct.

                               

                              no idea why it won't work.

                               

                              Is there some way of setting your default font?

                               

                              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?

                              • 12. Re: Installing Webfonts
                                Renskins Community Member

                                fix the problem, there was a space between web and fonts in the name of the webfonts folder.

                                 

                                Still would love to hear your answer to the above question though.

                                 

                                I also noticed in your code above that you haven't linked the webfont seconda to your stylesheet, is there any reason? do i still need to do that?

                                • 13. Re: Installing Webfonts
                                  osgood_ MVP

                                  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