css Question posted in
Some basic documentation can be found here.

Css – Custom font-weight definition for non-standards files

I have a non standarnd font file that font weight values are variable from 38 to 682 and any value in this range can be used.

When in css I write font-weight: bold; by default it change to font-weight: 700; and because it is over 682 it is Ultra bold.

Is there any way to tell css that change font-weight: bold; to something like font-weight: 249;? We don’t want to use 249 directly in css in case font change later.

This is how font defined:

@font-face {
  font-family: "Font Name";
  src: url("Font-Name-Variable.woff2") format("woff2 supports variations");
  font-weight: 38 682;
  font-style: normal;
  font-display: swap;
}
Tags:

2

Answers


  1. 0

    When using a variable font, you can specify the integer values as font-weight property values. E.g.,

    <p style="font-weight:619;">

    See https://www.w3.org/TR/css-fonts-4/#font-weight-prop for specific details.

    Login or Signup to reply.
  2. 0

    You could map specific font-weights to a specific weight-axis value by adding a font-variation-settings property to you @font-face rule.

    Unfortunately, only Firefox currently supports font-variation-settings in font-face – they are well supported in element style rules (See caniuse record).

    @font-face {
  font-family: 'Advent Pro';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-variation-settings: "wght" 720;
  src: url(https://fonts.gstatic.com/s/adventpro/v28/V8mVoQfxVT4Dvddr_yOwrzaFxV7JtdQgFqXdUC4nMm4.woff2) format('woff2');
}

@font-face {
  font-family: 'Advent Pro';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  font-variation-settings: "wght" 150;
  src: url(https://fonts.gstatic.com/s/adventpro/v28/V8mVoQfxVT4Dvddr_yOwrzaFxV7JtdQgFqXdUC4nMm4.woff2) format('woff2');
}

body {
  font-family: 'Advent Pro';
  font-size: 2em;
}
    <h1>Works only in Firefox</h1>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible <strong>vermin.</strong></p>

    The above example maps the regular weight to font-variation-settings: "wght" 720 and bold to "wght" 150.

    So to this date you need to write adjust your style rules and add the specific axis values or weights.

    strong,
h1, h2, h3{
  font-weight: 249;
  /* or use font-variation-settings*/
  font-variation-settings: "wght" 249;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search