Question Details

No question body available.

Tags

html css fonts font-face

Answers (2)

Accepted Answer Available
Accepted Answer
November 9, 2025 Score: 2 Rep: 19,832 Quality: High Completeness: 100%

As described by Ssword your relative file paths are indeed not correct as your current paths expects assets/fonts folder structure to be in the CSS file location.

Check font loading via Dev Tools

You can check if font files are loaded by inspecting the network tab. There you can filter by font resources.

Dev tools
Chromium Dev tools

If a font file doesn't show up – there is probably something wrong with your file paths.

Using bundlers or preprocessors

Font src paths must be relative to the final CSS location. This is important if your CSS file is moved to another folder during compilation e.g when using .scss modules for @font-face rules.

BTW. Since font files are usually only relevant for CSS font loading – there is nothing wrong about moving the fonts folder into the CSS directory. Then you could use a relative path like url("avenir-pro-fonts/avenir-pro-bold/avenirprobold.woff2")

I don't see a 404 in the console

Unlike incorrect script, CSS or image paths – wrong font references usually "fail silently" – so you don't see a log in the console directly.

However, you may see other potential errors directly in the console log such as OTS parsing errors (usually indicating your font file got corrupted e.g during bundling or upload) or errors related to not found resources.

But there are other potential issues in the @font-face rules as well:

Remove obsolete formats

For many years we have spotless support for woff2. Unless you're working on a very specific task such as a web presentation for a 20 year old device running windows xp or ios 1 – you can safely delete:

  • .eot - only internet explorer < 9
  • .svg - only supported by webkit/safari (all modern versions support woff2)

This ultimately makes your CSS less prone to syntax errors (especially the ugly .eot bindings are worth to get rid of).

Font format descriptors – necessary?

While omitted file desciptors like
url("../assets/fonts/avenir-pro-fonts/avenir-pro-bold/avenirprobold.ttf") are allowed
invalid ones may "bomb"/invalidate the entire font-face rule!

url("../fonts/avenir-pro-fonts/avenir-pro-regular/avenirproregular.otf") format("otf"),
url("../fonts/avenir-pro-fonts/avenir-pro-regular/avenirproregular.ttf") format("ttf")

Both otf and ttf are not valid as descriptors and should be replaced by opentype and truetype – or better: just remove them as any browser supporting .otf also supports .ttf files and all "modern" browsers support woff2.

Nonetheless, better include font descriptors as they help the browser to identify the file format before parsing.

Web font loading is style agnostic

There was an issue with the font-family name not matching the actual file name

This is intended: you can map any font file to any font-family, font-weight or font-style

While the browser could read the intrinsic font properties such as font-family name, style etc. (actually how most graphic applications work with installed fonts) – browsers don't "automap" loaded font files to CSS properties.

While this may seem inconvenient at first glance it actually provides more flexibility as we can also map certain unicode ranges to a different font (See also "How to imitate a monospace font with a variable-width font?".

Therefore, you don't need to use file based font-family names. You can use a global font-family name and map the different weights and styles to this family:

@font-face {
  font-family: 'Avenir';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/urbanist/v18/L0xjDF02iFML4hGCyOCpRdycFsGxSrqDyx4vEZmq.woff2) format('woff2');
}
@font-face {
  font-family: 'Avenir';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/urbanist/v18/L0xjDF02iFML4hGCyOCpRdycFsGxSrqDLBkvEZmq.woff2) format('woff2');
}
@font-face {
  font-family: 'Avenir';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/urbanist/v18/L0xtDF02iFML4hGCyMqgdyNEf6or5L2WA133VamoY8A.woff2) format('woff2');
}
@font-face {
  font-family: 'Avenir';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/urbanist/v18/L0xtDF02iFML4hGCyMqgdyNEf6or5L2WA10QUqmoY8A.woff2) format('woff2');
}
body{
  font-family: Avenir;
}
Heading


One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.

The above example illustrates the concept of mapping various font-family variants (weight, style, width etc) to different file resources.

E.g Font family "Avenir" to google font "Urbanist" (admittedly, not even remotely Adrian Frutiger=) font files.

The main advantage of using a "global" family name instead of AvenirRegular, AvenirBold etc. is that we can simplify the CSS element style rules significantly: default emboldened or italic elements such as headings or tags are automatically mapped to the desired file.

November 9, 2025 Score: 2 Rep: 125 Quality: Low Completeness: 60%

Yeah you messed up the file paths. url("dir/file") resolves files relative to the requesting file, not the web root / . to fix this, either prefix with / assuming the image you posted is the root directory statically served. or use relative paths relative to the requesting file (main.css).

The second one works even when served but the first is more readable.

if hosted in a development server (more readable).

@font-face {
    font-family: avenirprolight;
    src: 
        url("/assets/fonts/avenir-pro-fonts/avenir-pro-light/avenirprolight.eot") format("eot"),
        url("/assets/fonts/avenir-pro-fonts/avenir-pro-light/avenirprolight.otf") format("otf"),
        url("/assets/fonts/avenir-pro-fonts/avenir-pro-light/avenirprolight.svg") format("svg"),
        url("/assets/fonts/avenir-pro-fonts/avenir-pro-light/avenirprolight.ttf") format("ttf"),
        url("/assets/fonts/avenir-pro-fonts/avenir-pro-light/avenirprolight.woff") format ("woff"),
        url("/assets/fonts/avenir-pro-fonts/avenir-pro-light/avenirprolight.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: avenirprobold;
    src: 
        url("/assets/fonts/avenir-pro-fonts/avenir-pro-bold/avenirprobold.eot") format("eot"),
        url("/assets/fonts/avenir-pro-fonts/avenir-pro-bold/avenirprobold.otf") format("otf"),
        url("/assets/fonts/avenir-pro-fonts/avenir-pro-bold/avenirprobold.svg") format("svg"),
        url("/assets/fonts/avenir-pro-fonts/avenir-pro-bold/avenirprobold.ttf") format("ttf"),
        url("/assets/fonts/avenir-pro-fonts/avenir-pro-bold/avenirprobold.woff") format ("woff"),
        url("/assets/fonts/avenir-pro-fonts/avenir-pro-bold/avenirprobold.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: avenirproregular;
    src: 
        url("/assets/fonts/avenir-pro-fonts/avenir-pro-regular/avenirproregular.eot") format("eot"),
        url("/assets/fonts/avenir-pro-fonts/avenir-pro-regular/avenirproregular.otf") format("otf"),
        url("/assets/fonts/avenir-pro-fonts/avenir-pro-regular/avenirproregular.svg") format("svg"),
        url("/assets/fonts/avenir-pro-fonts/avenir-pro-regular/avenirproregular.ttf") format("ttf"),
        url("/assets/fonts/avenir-pro-fonts/avenir-pro-regular/avenirproregular.woff") format ("woff"),
        url("/assets/fonts/avenir-pro-fonts/avenir-pro-regular/avenirproregular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

If you just want it to work even when not served by a server use this


@font-face {
    font-family: avenirprolight;
    src: 
        url("../fonts/avenir-pro-fonts/avenir-pro-light/avenirprolight.eot") format("eot"),
        url("../fonts/avenir-pro-fonts/avenir-pro-light/avenirprolight.otf") format("otf"),
        url("../fonts/avenir-pro-fonts/avenir-pro-light/avenirprolight.svg") format("svg"),
        url("../fonts/avenir-pro-fonts/avenir-pro-light/avenirprolight.ttf") format("ttf"),
        url("../fonts/avenir-pro-fonts/avenir-pro-light/avenirprolight.woff") format ("woff"),
        url("../fonts/avenir-pro-fonts/avenir-pro-light/avenirprolight.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: avenirprobold;
    src: 
        url("../fonts/avenir-pro-fonts/avenir-pro-bold/avenirprobold.eot") format("eot"),
        url("../fonts/avenir-pro-fonts/avenir-pro-bold/avenirprobold.otf") format("otf"),
        url("../fonts/avenir-pro-fonts/avenir-pro-bold/avenirprobold.svg") format("svg"),
        url("../fonts/avenir-pro-fonts/avenir-pro-bold/avenirprobold.ttf") format("ttf"),
        url("../fonts/avenir-pro-fonts/avenir-pro-bold/avenirprobold.woff") format ("woff"),
        url("../fonts/avenir-pro-fonts/avenir-pro-bold/avenirprobold.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: avenirproregular;
    src: 
        url("../fonts/avenir-pro-fonts/avenir-pro-regular/avenirproregular.eot") format("eot"),
        url("../fonts/avenir-pro-fonts/avenir-pro-regular/avenirproregular.otf") format("otf"),
        url("../fonts/avenir-pro-fonts/avenir-pro-regular/avenirproregular.svg") format("svg"),
        url("../fonts/avenir-pro-fonts/avenir-pro-regular/avenirproregular.ttf") format("ttf"),
        url("../fonts/avenir-pro-fonts/avenir-pro-regular/avenirproregular.woff") format ("woff"),
        url("../fonts/avenir-pro-fonts/avenir-pro-regular/avenirproregular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}