Home/ Questions/Q 9282723
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T18:26:51+00:00

Sorry if it’s incorrect practice to post multiple problems, but: I have a working

  • 0

Sorry if it’s incorrect practice to post multiple problems, but:

I have a working @font-face set up, but when I set the font-weight inside @font-face, Firefox displays my default font instead of the one I defined in @font-face. Chromium doesn’t even seem to work with @font-face in the first place…
And, I think due to me not being able to set the font-weight, the font (Lato Black) is way too bold.

Here is my HTML:

<!DOCTYPE HTML>
<html>

  <head>
    <meta charset = "utf-8">
    <title>Marco Scannadinari</title>
    <link href = "layout.css" type = "text/css" rel = "stylesheet">
  </head>

  <body>
    <div class = "centre">
      <div class = "lato-black">
        <h1>Marco Scannadinari</h1>
      </div>
      <div class = "cantarell">
        <p>Lorem ipsum dolor sit amet.</p>
      </div>
    </div>
  </body>

</html>

… And my CSS:

body {
  background: #cdcdcd;
  margin-top: 32px;
  margin-left: 512px;
  margin-right: 512px;
}

div.centre {
  text-align: center;
}

@font-face {
  font-family: "lato-black";
  src: url("fonts/Lato-Bla.ttf")
  format("truetype")
}

@font-face {
  font-family: "cantarell";
  src: local("fonts/Cantarell-Regular.otf")
  format("opentype")
}

div.cantarell {
  font-family: "cantarell";
}

div.lato-black {
  font-family: "lato-black";
  text-shadow: 0px 1px #ffffff;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have to use different formats of fonts for different browsers. In the end you should have something like this: 

    @font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
         url('myfont-webfont.woff') format('woff'), 
         url('myfont-webfont.ttf')  format('truetype'),
         url('myfont-webfont.svg#svgFontName') format('svg');
    }
    • 0