Question 259374 in Html Question posted in
Some basic documentation can be found here.

Html – h1 @font-face weight, being overwriten by user agent

I have a custom font being downloaded from a s3 bucket. I’m setting its weight accordingly to the default weight the font has like so:

@font-face{font-family:XXX;font-weight:400;font-style:normal;}

but the user agent stylesheet is overriding its font-weight when I use it in an h1 tag with font-weight: bold.

How can I prevent it?

searching in the docs to find a CSS rule to make the h1 behavior let the default font-weight as it is

Tags:

2

Answers


  1. 0

    Add a CSS rule to overwrite the bold font-weight setting every browser applies by default, similar to this:

    h1 {
 font-weight: normal;
}

    This should make all h1 tags use the regular font-weight setting you defined in your @font-face rule.

    If any h1 rule in your stylesheet is more specific and overrules this, you might want to add !important

    Login or Signup to reply.
  2. 0

    Responding to the OP’s comment

    the problem is that the font may have only one weight, like 500, so I
    can’t set it manually I need the browser to respect the default weight
    that comes defined in the @font-face

    A @font-face can map any specific font file to any font-family, font-weight or font-style.

    In other words: the browser doesn’t care about the "intrinsic" properties of a font file – although a font actually contains info about the intended weight and style. You can inspect a font file e.g via an online tool like wakamaifondue

    Map font file to font-family/font-weight/font-style

    Here’s an example mapping a light/thin Montserrat to a bold font weight – even to another font-family (Open Sans).

    /* original font face rule retrieved from google fonts
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100;
  src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUFjIg1_i6t8kCHKm459Wx7xQYXK0vOoz6jq6R8WXh0pg.woff2) format('woff2');
}
*/

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUFjIg1_i6t8kCHKm459Wx7xQYXK0vOoz6jq6R8WXh0pg.woff2) format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw5aXo.woff2) format('woff2');
}

body {
  font-family: 'Open Sans';
  font-size:10vmin;
}

em {
  font-weight: 700;
  color:red;
}
    <h1>Headline</h1>
<p>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 bedding was hardly able to cover it and seemed ready <strong>to slide off </strong><em>any moment.</em></p>

    Although, the loaded Montserrat font should be used as a "Montserrat light italic" – we can easily map the applied fonts as we like.

    User agent styles are just fallbacks

    They don’t override anything.
    This is an important difference. In contrast to overridden style rules e.g caused by a main style sheet, theme or "framework" (like bootstrap) – a user agent default doesn’t introduce higher specificities.

    As already commented, a font face rule doesn’t apply a font-family to specific elements. Besides, some elements don’t inherit font families from their parent elements – for instance form elements like <input>.
    So we need to be more specific:

    @font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUFjIg1_i6t8kCHKm459Wx7xQYXK0vOoz6jq6R8WXh0pg.woff2) format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw5aXo.woff2) format('woff2');
}

body {
  font-family: 'Open Sans';
  font-size:16px;
}

.inherit{
  font-family: inherit;
}
    <h1>Headline</h1>
  <input type="text" value="text input (agent default)">
  <input class="inherit" type="text" value="text input inherit font">
<p>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 bedding was hardly able to cover it and seemed ready to slide off any moment.</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search