0

A bit confused on the process here, but I've tried to embed a new font into a CSS file for an html website, but no matter what I try, the font does not appear on the html site. I've put the font through a converter and then put that entire file into my CSS folder that is in the same file as my index.html, to no avail. Here is the code I've put into CSS:

    font-family: 'Montserrat';
    src: url('Montserrat-SemiBold.woff2') format('woff2'),
        url('Montserrat-SemiBold.woff') format('woff'),
        url('Montserrat-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;

Is there anything I can try to get the code to display properly?

James Z
  • 12,209
  • 10
  • 24
  • 44
spookz
  • 1

2 Answers2

0

You should add the @font-face keyword to import a font See this example

MAH
  • 36
  • 3
  • Thanks for the input, however, when added, the font still does not appear in the html file. – spookz Nov 26 '21 at 22:45
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 26 '21 at 23:49
0

Start here: https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

hello world example

enter image description here

You should add a CSS selector (select element(s)) body for example:

<!DOCTYPE HTML>

<html>

<head>
    <style>
        @font-face {
            font-family: 'hello-font';
            font-weight: 600;
            /* Use chrome inspect and check if the path is correct */
            src: url(hello-font.woff2) format('woff2');
        }
        /* missing in your styles */
        body {
            font-family: 'hello-font', sans-serif;
        }
    </style>
    <title>Your Website</title>
</head>

<body>
    <h1>hello world</h1>
</body>

</html>

"file not found"

Anyway if you use local files - no way to know if the path/filename is correct without live URL (Chrome inspect for red errors) - Error example:

enter image description here

Option 2 (Better) - Load google fonts by CDN

** Better speed performance / Easier to maintain.

<html>
  <head>
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
  </body>
</html>
Ezra Siton
  • 6,887
  • 2
  • 25
  • 37