htmlcsswebfontsembedded-fonts

Embedded font is not rendering or downloading

I've been stuck on this for an hour. Clearly I have no idea what I'm doing...

What is wrong with the embed below? Checking the network tab, fonts.css is being loaded, but the Network tab doesn't even attempt to download any webfonts.

What am I doing wrong?

Browser: Google Chrome (latest version)

fonts.css

@font-face {
font-family: 'PTSans';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/PT_Sans-Web-Regular.ttf) format('truetype'),
      url(../fonts/PT_Sans-Web-Regular.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'PTSans';
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/PT_Sans-Web-Bold.ttf) format('truetype'),
        url(../fonts/PT_Sans-Web-Bold.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

main.css

html, body {
   font-family: 'PTSans', serif;
   ...etc
}

index.html

<html>
    <head>
        <title>Title</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=10">
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"> 
        <link href="css/fonts.css" rel="stylesheet">
        <link href="css/main.css" rel="stylesheet">
...etc

Edit: And yes... I did check if the intended text had the correct font family set. See proof here:

enter image description here

(It renders with Serifs - so yes, I'm categorically certain the CSS pointing is correct)

And here's the folder structure... (again the browser doesn't even attempt to download the file being referenced... so it shouldn't matter if the files aren't present... I should at least be seeing the activity in the network panel...)

enter image description here

Any help is appriciated, thank you in advance.

Solution

  • Based on your image I can see that you named the folder as font but the url() of the src property has fonts:

    src: url(../fonts/PT_Sans-Web-Regular.ttf) format('truetype'),
      url(../fonts/PT_Sans-Web-Regular.woff2) format('woff2');