Search code examples
cssfontsfont-face

Font not rendering properly / font-face not working?


I hope I'm asking this question in the right place,

I'm working on a website for a friend, here's the site hosted on my goDaddy acc:

http://www.andkensol.com/rowanWeb/

And here it is on my friends:

http://www.rowanmoore.org/

You can see the clear difference in the title font. If you inspect them you'll see they are both using CODE. I personally uploaded all the files myself and the file structure, layout, file paths are all identical yet the font won't render on my friends site.

I downloaded the font from font squirrel and I'm using @font face to implement it in both sites.

CSS

@font-face {
    font-family: CODE;
    src: url('font/CODE Light.otf');
}

#nameTitle{
    font-size:60px;
    font-family:CODE;
    color:white;
    font-weight:400;
    margin-bottom:-3%;
}

The 'font folder' is in the same folder as the stylesheet and CODE Light.otf is in the font folder.

Ive deleted the site from my friends server, downloaded it from mine and then uploaded it to my friends and still no luck.

Could this be a problem on goDaddy's end perhaps?


Solution

  • I recommend you to use some webgenerator to generate css file with different formats of font. I think your problem is wrong @font-face.

    @font-face {
    font-family: 'nfs';
    src: url('yourFont.eot');
    src: url('yourFont.eot?#iefix') format('embedded-opentype'),
         url('yourFont.woff') format('woff'),
         url('yourFont.ttf') format('truetype'),
         url('yourFont.svg#yourFontName') format('svg');
    font-weight: normal;
    font-style: normal;
    

    }

    Diffrenet browser need other format to render and open font.

    I'm using mostly those three webfont generators http://onlinefontconverter.com/

    http://www.fontsquirrel.com/tools/webfont-generator

    http://convertfonts.com/

    But there is more, type to uncle google "font generator"

    EDIT: i think blank space in your font/CODE Light.otf is the problem try to use for example something like this font/CODE_Light.otf