How to make @font-face fonts work

StackOverflow https://stackoverflow.com/questions/23665615

  •  22-07-2023
  •  | 
  •  

Question

I am following a tutorial on how to make @font-face work, but it isn't working properly. I've put in the following code, but it doesn't work. 

 <!DOCTYPE html>
    <html>
      <head>
        <script src="/javascripts/vendor/jquery.js" type="text/javascript"></script>
        <link rel="stylesheet" href="/stylesheets/css.css" type="text/css" />
            <style> 
          @font-face
            {
            font-family: myFirstFont;
            src: url(sansation_light.woff);
            }

            h1
            {
            font-family:myFirstFont;
            }
        </style>

        <title>Hart</title>
      </head>
      <body >
        <h1>Hart</h1>
      </body>
    </html>
Was it helpful?

Solution

First, put your styles in the stylesheet and reference each font type for all browsers.

font-family: 'MyWebFont';
  src: url('styles/webfont.eot'); /* IE9 Compat Modes */
  src: url('styles/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('styles/webfont.woff') format('woff'), /* Modern Browsers */
       url('styles/webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('styles/webfont.svg#svgFontName') format('svg'); /* Legacy iOS */

Be sure to run the font file through Font Squirrel: http://www.fontsquirrel.com/tools/webfont-generator.

CSS Tricks has a great write up. http://css-tricks.com/snippets/css/using-font-face/

OTHER TIPS

Most modern browsers support the @font-face rule, but not all with the same format. There is a more comprehensive @font-face declaration that includes all of the formats for all of the browsers (although everything appears to be heading in the woff direction, include them all just to be sure, and you didn't mention the browser you were having the issue with)

Some thing like this

font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */

Reference here

If you don't have the other formats, sites like Font Squirrel can help out there (please respect font licences), they have a webfont generator

Another possible issue, is make sure that the path is correct, in relation to the file that the path is in. i.e. if it is in the HTML file, the path needs to relative to the HTML file, but if it is in an external stylesheet, it needs to be relative to the stylesheet. You could of course just use an absolute path (i.e. starts with a / and the full path to the font file). Now based on your code above, the font file (sansation_light.woff) must be located in the same directory as that html file. (checking developer tools can be helpful here, to see the path the browser is requesting the file from. If it fails, you'll get a 404 on the file)

Now if this still doesn't solve your issue, then it may be something to do with your webserver. Sometimes they are not set up correctly to serve the Font formats (and you get a 404 or the like error, again check the developer tools for errors downloading font files), so you may need to add mimetype support for them at the webserver level too.

The first thing to check is the path. The way you wrote the URL to the font, it needs to be in the same folder as the .html file that references it.

The second thing to check is that you actually added the font to your website :)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top