Search code examples
cssfontsfont-face

Font Family not working with font face

http://www.chooseyourtelescope.com/

The big "C" in the middle of the page, and the H1 ('Choose The Right...) should be be written with "Pirulen" font-family.

I first tried the "classic" @font-face method, and then the advenced one by using WEBFONT GENERATOR and adding all the files created in MyFonts folder.

CSS

@font-face {
    font-family: 'pirulenregular';
    src: url('/www/wp-content/themes/virtue - child/MyFonts/pirulen_rg-webfont.eot');
    src: url('/www/wp-content/themes/virtue - child/MyFonts/pirulen_rg-webfont.eot?#iefix') format('embedded-opentype'),
         url('/www/wp-content/themes/virtue - child/MyFonts/pirulen_rg-webfont.woff2') format('woff2'),
         url('/www/wp-content/themes/virtue - child/MyFonts/pirulen_rg-webfont.woff') format('woff'),
         url('/www/wp-content/themes/virtue - child/MyFonts/pirulen_rg-webfont.ttf') format('truetype'),
         url('/www/wp-content/themes/virtue - child/MyFonts/pirulen_rg-webfont.svg#pirulenregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

But it still doesn't work

Solution

  • Your url needs to be a web url, not a file path. You generally set it up relative the the location of the css file, so it would be:

    @font-face {
    font-family: 'pirulenregular';
    src: url('MyFonts/pirulen_rg-webfont.eot');
    src: url('MyFonts/pirulen_rg-webfont.eot?#iefix') format('embedded-opentype'),
     url('MyFonts/pirulen_rg-webfont.woff2') format('woff2'),
     url('MyFonts/pirulen_rg-webfont.woff') format('woff'),
     url('MyFonts/pirulen_rg-webfont.ttf') format('truetype'),
     url('MyFonts/pirulen_rg-webfont.svg#pirulenregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

    The next issue is that on the page you specify the font family as "pirulen" but in the CSS it is "pirulenregular", these have to match, so pick one.