0

so I'm trying to import a local font, but for some reason it's not being recognized, can I get some quick help on where I'm going wrong please?

I currently have 3 documents: index page, stylesheet.css and fonts.css. I'm trying to use the font 'cinzel' however it's not working.

Index page:

<html>
<head>
    <link rel="fonts" type="text/css" href="css/fonts/fonts.css"/>
    <link rel="stylesheet" type="text/css" href="css/stylesheet/stylesheet.css"/>
    <style type="text/css">



    </style>
    <title>
        RENTDrive
    </title>
</head>

<body>
    <h1> RENTDrive </h1>

    <hr>


    <h3> Lots of exotic cars to choose from</h3>
    <a href="fleet.html">Book your vehicle now!</a> <p> Terms and conditions apply</p>
</body>

stylesheet.css page:

h1 {
    font-family: 'cinzel';
}

h3 {
    font-family: 'cinzel';
}

And the fonts.css page:

@font-face {
    font-family: 'cinzel';
    src: url('css/fonts/Cinzel-Regular.otf') format('opentype'),
         url('css/fonts/CinzelDecorative-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
4
  • Check your console to see if you have any errors.
    – tadman
    Apr 15, 2018 at 23:43
  • no errors that I can see... got unexpected token on line 1 but it looks fine to me..
    – AadilF1
    Apr 15, 2018 at 23:52
  • That sounds like an error.
    – tadman
    Apr 15, 2018 at 23:59
  • But I can't change it, there's nothing to change here...
    – AadilF1
    Apr 16, 2018 at 0:05

2 Answers 2

0

Can you change the rel to stylesheet.

<link rel="stylesheet" type="text/css" href="css/fonts/fonts.css"/>
2
  • Tried this. Does not change anything. Still doesn't work.
    – AadilF1
    Apr 15, 2018 at 23:44
  • Just to rule it out I would check the network tab to make sure the css file is being pulled. In the body when h1 is hit it should try to get the otf.
    – user9649266
    Apr 16, 2018 at 0:26
0

heading tag's default font-weight is bold(in user agent stylesheet). so, you will remove font-weight: normal, you can see that

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.