Search code examples
htmlcsstruetype

Adding custom font ttf not working

I'm trying to add new fonts to my website. Just got the TTF file of the font I want (Gill Sans Light). Here is my test code

main.css :-

@font-face {
    font-family: 'Gill Sans Light';
    src: url('fonts/gill-sans-light.ttf') format('truetype');
}

index.html :-

<html>
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" href="css/main.css" type="text/css" media="all"/>     
    </head>

    <body>
        <div class="landing">
            <div class="logo">
                <div class="title">
                    <span style="font-family: 'Gill Sans Light'">Testing Font</span>
                </div>                
            </div>
        </div>
    </body>
</html>

But when I open index.html in a browser it doesn't work. Moreover, on Chrome it shows the error - 

Failed to load resource: net::ERR_FILE_NOT_FOUND    gill-sans-light.ttf

Which makes no sense to me, because the file is there and I've triple checked for filename errors.

I know there are a ton of related questions. But none of the solutions are really helping me. How do I fix this?

Solution

  • The file gill-sans-light.ttf should exist in the following path:

    css/fonts/gill-sans-light.ttf

    You main.css file is inside the css folder, and the reference is to fonts/gill-sans-light.ttf, so this path should be inside the css folder.