Help Please Cannot link css file to Font files

HTML/CSS
1

Hi, help please,

I have copied fonts from google and put them into a Font file. I am trying to link them to my CSS code as below but they will not link. The text remains as default Serif. I am using Visual Studio Code editor on PC and windows.

Does anyone have any suggestions on how to rectify.

Thanks in advance.

The file structure is as below:

CSS Dir
_____CSSfile.css

Fonts Dir
__Montderrat Dir
____Montserrat-Bold.tff
__Roboto Dir
_____Roboto-Black.ttf

HTML Dir
_____HTMLfile.html


@font-face {
    font-family:Montserrat-Bold;
    src: url(../fonts/Montserrat/Montserrat-Bold.ttf);
}
@font-face {
    font-family:Roboto-Black ;
    src: url(../fonts/Roboto/Roboto-Black.ttf);


h1{
    font-family:  Montserrat-Bold, Verdana, Geneva, Tahoma, sans-serif;
    font-size: 40px;
   }

   p{
    font-family: 'Roboto-Black', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size:1.5 em ;
    font-weight: bold;
    font-style: italic;
    }


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="../CSS/R_Fonts3.css" />

    <title>Fonts</title>
  </head>
  <body>
    <h1>Font Type </h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, dolorum!
      Modi voluptatibus voluptatum a possimus expedita architecto ex earum
      sapiente dolor maiores, consequatur aliquam recusandae dolore rerum sint
      eaque assumenda?
    </p>
  </body>
</html>

Font path2
Font path21904×884 116 KB

2

Hi Roler,

I can see your second font-face rule is not closed out, it is missing the right curly brace, this can potentially cause issues in your css code. Do add this and see if it fixes the issue

1 Like
3

Spot on…That was it… Now I can sleep. Thankyou so much :heart_eyes:
I saw the error message but couldnt see where it was and didnt think it was associated with the fonts as it was at the end of the block of code. Thanks again lucidlear.