htmlcssfontsfont-face

Why isn't font-face CSS working properly, did I mess up the file path?

I've also tried to use the src: local("") for linking the font file but that also doesn't work.

There was an issue with the font-family name not matching the actual file name which was odd but has since been resolved, now I really don't know what's wrong

I'm using a Mac and running on Chrome, and coding on Phoenix Code

Screenshot of CSS Code and File Tree:

file tree

Here's an image of what the html looks like when running on chrome

html live preview on phoenix code

HTML:

<!DOCTYPE html>
<html lang="en">
<head lang="en">
    <title> Title </title>
    <link rel="icon" type="image/x-icon" href="../shared/img/logo/favicon.ico">
    <link rel="icon" type="image/x-icon" href="../shared/img/logo/favicon-dark.png" media="(prefers-color-scheme: light)">
    <link rel="icon" type="image/x-icon" href="../shared/img/logo/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="stylesheet" type="text/css" href="../assets/css/reset.css"> 
    <link rel="stylesheet" type="text/css" href="../assets/css/main.css">
</head>   
<body> 
<div style="border:none;margin:0;padding:0;height:100px;width:100px;position:absolute;overflow:scroll;left:-1000px;top:-1000px;">      
  <div style="border:none;margin:0;padding:0;height:100%;width:100%;position:absolute;"> </div>
</div>
<div class="header">
<a class="header-logo changepage" href="../en/index.html">
    <img class="icon header-logo-icon" src="../shared/img/logo/logo_header.png">
</a>
<nav class="header-nav">
    <a id="header-nav-item-works" class="header-nav-item  changepage" href="../en/works.html" data-title="">works</a>
    <a id="header-nav-item-about" class="header-nav-item  changepage" href="../en/about.html" data-title="">about</a>
    <a id="header-nav-item-contact" class="header-nav-item  changepage" href="../en/contact.html" data-title="">contact</a> 
 </nav>
<div class="header-lang">
    <a class="header-lang-item" href="/es" data-lang="es">en</a>
</div>
<div class="home-mentions">
    <a class="home-mentions-legal changepage" href="../en/legal.html">Legal</a>
    <a class="" href="" target="_blank">
    <img class="home-mentions-jafg" src="../shared/img/logo/logo-footer.png"></a>
</div>
</div> 
</body>
</html>

Here is the CSS code as seen on the image relating to the font-face, as well as needed css to format the code to match the image. I've labeled each css to its corresponding file (reset.css & main.css)

reset.css

/*  
 Filename:      reset.css
 Description:   Resets default HTML styles across browsers
                Includes HTML5 patches & Print Styles
*/


/* MARGINS, PADDING & FONT SIZE 
------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

address,caption,cite,code,dfn,th,var {
    font-style:normal;
    font-weight:normal;
}

body {
    line-height: 1;
}

p {
    margin-bottom: 1em;
}



/*  TABLES 
------------------------------------------- */
caption,
th {
    font-weight: bold;
    text-align:left;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}



/*  FORMS
------------------------------------------- */
fieldset {
    border: 1px solid black;
    padding: 1em;
}

legend {
    font-weight: bold;
}



/* BORDERS 
------------------------------------------- */
img {
    border:0;
}


abbr,
acronym {
    border-bottom: 1px dotted #666;
    cursor:help;
}


/* MISCELLANEOUS 
------------------------------------------- */

del {
    text-decoration: line-through;
}

blockquote, 
q {
    quotes: none;
}

blockquote:before, 
blockquote:after,
q:before,
q:after {
    content: " ";
    content: none;
}

dfn {
    font-style: italic;
}

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
}

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

small {
    font-size: 80%;
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
sup {
  top: -.5em;
}
sub {
  bottom: -.25em;
}

mark {
  color: #000;
  background: #ff0;
}


/* HTML5 PATCHES
------------------------------------------- */
/* Corrects 'block' display not defined in IE 8/9 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/*Corrects `inline-block` display not defined in IE 8/9 */
audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline;
}

/* Prevents modern browsers from displaying `audio` without controls.
   Remove excess height in iOS 5 devices.  */

audio:not([controls]) {
    display: none;
    height: 0;
}


/* Addresses styling for `hidden` attribute not present in IE 8/9 */
[hidden] {
    display: none;
}

/* Corrects overflow displayed oddly in IE 9.  */
svg:not(:root) {
    overflow: hidden;
}

/* Addresses margin not present in IE 8/9 and Safari 5. */
figure {
    margin: 0;
}


/* PRINT STYLES
------------------------------------------- */
/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */

@media print {
  *,
  *:before,
  *:after {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;

    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  select {
    background: #fff !important;
  }
  .navbar {
    display: none;
  }
  .btn > .caret,
  .dropup > .btn > .caret {
    border-top-color: #000 !important;
  }
  .label {
    border: 1px solid #000;
  }
  .table {
    border-collapse: collapse !important;
  }
  .table td,
  .table th {
    background-color: #fff !important;
  }
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #ddd !important;
  }
}

/* last updated 4/9/15 */


main.css

html {
    height: 100%;
    width: 100%;
    min-width: 768px;
    min-height: 600px;
    background-color: #171717;
    font-family: avenirprolight;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    overflow-y: scroll;
}

.header {
    position: fixed;
    width: 100%;
    height: 90px;
    background-color: #fff;
    z-index: 98;
}

.header-logo {
    position: absolute;
    left: 40px;
    top: 20px;
}

.header-logo-icon {
    position: absolute;
    width: 55px;
    height: 55px;
    left: -2px;
    top: -6px;
    color: #171717;
    fill: #c8c7c7;
}

.header-nav {
    position: absolute;
    height: 13px;
    top: 37px;
    right: 182px;
    font-family: avenirprobold;
    font-size: 14px;
    text-transform: uppercase;
    border-right: 1px solid #d2d2d3;
}

.header-nav-item {
    position: relative;
    display: inline-block;
    vertical-align: top;
    text-decoration: none;
    color: #171717;
    margin: 0 10px;
    transition: color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.header-nav-item:after {
    position: absolute;
    width: 0;
    height: 3px;
    left: 0;
    top: 20px;
    background-color: #ddc192;
    content: "";
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.header-nav-item:hover:after {
    width: 15px;
}

.header-nav-item:hover {
    color: #ddc192;
}

.header-lang {
    position: absolute;
    width: 80px;
    height: 13px;
    top: 36px;
    right: 0;
    line-height: 13px;
}

.header-lang-item {
    position: relative;
    width: 26px;
    height: 13px;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    font-family: avenirproregular;
    font-size: 10px;
    line-height: 14px;
    background-color: #ddc192;
    overflow: hidden;
}

.header-lang-item:after {
    position: absolute;
    background-color: #3a3a3a;
    width: 100%;
    left: -26px;
    top: 0;
    content: attr(data-lang);
    transition: left 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.header-lang-item:hover:after {
    position: absolute;
    left: 0;
}

.home-mentions {
    position: absolute;
    right: 20px;
    bottom: 10px;
    z-index: 99;
}

.home-mentions-legal {
    display: inline-block;
    vertical-align: middle;
    font-family: avenirprolight;
    font-size: 12px;
    color: #fff;
    text-decoration: none;
    margin-right: 20px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.home-mentions-legal:hover {
    color: #171717;
}

.home-mentions-jafg {
    display: inline-block;
    vertical-align: middle;
    width: 13px;
    height: 13px;
    background-image: url(../../shared/img/logo/logo-footer.png);
    opacity: 0.5;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.home-mentions-jafg:hover {
    opacity: 1;
}

/*-- FONT-FACE --*/

@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;
}
Solution

  • 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 <link rel="preload"> 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:

    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;
}
    <h1>Heading</h1>
<p>One morning, when <em>Gregor Samsa</em> woke from <strong><em>troubled</em></strong> dreams, he found himself transformed in his bed into a <strong>horrible vermin</strong>. 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.</p>

    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 <strong> tags are automatically mapped to the desired file.