CODEWITHSUNDEEP
htmlcssfonts
user4718239
user4718239

Reputation:

Font-Family using default font

I want to use the Lato LIGHT font and downloaded it into my fonts folder: fonts/Lato-Light.ttf

This is my CSS File:

@font-face {
    font-family:'LatoLightFont';
    src: url(../fonts/Lato-Light.ttf) format('ttf')
}

body {
    font-family: 'LatoLightFont', "Courier New";
    font-size: 16px;
    line-height: 32px;
    font-weight: 200;
}
p {
    font-family: 'LatoLightFont', "Courier New";   
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'LatoLightFont', "Courier New";
}

But the font of my website is Courier New instead of Lato-Light. What is wrong?

The problem is that I want to use Lato, but the LIGHT version. I thought that I can use the LIGHT version by using font-style: Light, but this is also not working.

Upvotes: 0

Views: 103

Answers (1)

David Thomas
David Thomas

Reputation: 253496

The problem appears to be an error in the format() function/property, you have:

@font-face {
    font-family:'LatoLightFont';
    src: url(../fonts/Lato-Light.ttf) format('ttf')
}

Whereas it should be, from reference to the documentation hosted at Mozilla:

@font-face {
    font-family:'LatoLightFont';
    src: url(../fonts/Lato-Light.ttf) format('opentype')
}

References:

Upvotes: 1

Related Questions