Help Please Cannot link css file to Font files

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:


Fonts Dir
__Montderrat Dir
__Roboto Dir


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

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

    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">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

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

    <h1>Font Type </h1>
      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?

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

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.