How do I fix "fallback" weight for different fonts?

Question

I have a small, but immensely annoying problem.

I'm supposed to have a font-family for my h1, in the following fallback: BreeSerif, arial, sans-serif.

BreeSerif should be weight 400.
Arial should be weigth 700.
Sans-serif should be weight 400.

Now I have tried several things, but none seem to work.

First try: This renders my BreeSerif to "normal", makes Arial to bold, BUT it seems impossible to render sans-serif to "normal" since I've declared the h1 to 700.

Second try: Now since BreeSerif shall be normal, I could simply apply "sans-serif" to a @font-face and put it in font-weight: 700, but it doesn't work.

/* FIRST TRY */

@font-face {
    font-family: 'BreeSerif';
    src: url('fonts/BreeSerif-Regular.otf');
    font-weight: 700;'

h1 {
    font-family:
        BreeSerif,
        bold-arial,
        sans-serif;

   }

/* SECOND TRY */

@font-face {
    font-family: 'BreeSerif';
    src: url('fonts/BreeSerif-Regular.otf');
    font-weight: 700;

@font-face {
    font-family: 'sans-normal';
    src: local('sans-serif');
    font-weight: 700;

h1 {
    font-family:
        BreeSerif,
        arial,
        sans-serif;
    font-weight: 700;

/* THIRD TRY */

@font-face {
    font-family: 'BreeSerif';
    src: url('fonts/BreeSerif-Regular.otf');
    font-weight: 400;

@font-face {
    font-family: 'arialBold';
    src: local('arial');
    font-weight: 700;

h1 {
    font-family:
        BreeSerif,
        arialBold,
        sans-serif;
    font-weight: 400;


@font-face {
    font-family: 'BreeSerif';
    src: url('fonts/BreeSerif-Regular.otf');
    font-weight: 700;
}
@font-face {
    font-family: 'TradeWinds';
    src: url('fonts/TradeWinds-Regular.ttf');
    font-weight: 400;
}

}
@font-face {
    font-family: 'sansnormal';
    src: local('sans-serif');
    font-weight: 700;


}

body {
    width: auto;
    background: #eee;

    font-family: arial, sans-serif;
}

p {
    font-family: helvetica;
    font-size: 14px;
    color: #222;
}

/* LÖS DENNA SEN! */
h1 {
    font-family:
    BreeSeri,
    arial,
    sansnormal;
    font-weight: 700;
}

#ContentWrapper {
    background: white;
    width: 960px;
    margin: auto;
}

Expected result: normal, bold, normal

Actual result: normal, bold, bold

This is not possible in CSS. You can specify fallback font families, but not a fallback weight or size or style. One workaround would be to try 'Arial Black' instead of 'Arial'. — Mr Lister, Feb 09 '19 at 14:46
Thank you! I have managed to 'show' the fallback of Normal, Bold, Bold though. But that demands a font-face. I figured, since you're able to make a "normal, bold, bold" fallback, you should be able to have a "normal, bold, normal" with some font-face magic. — Swiking, Feb 09 '19 at 15:03
Here's a post that shows some ways how to detect which font is used, and with that you would be able to set a proper size/weight etc.: https://stackoverflow.com/questions/845/how-to-detect-which-one-of-the-defined-font-was-used-in-a-web-page — Asons, Feb 09 '19 at 15:07

score 0 · Answer 1 · answered Dec 02 '22 at 00:39

Defining dimensions by using size-adjust for fallback fonts slowly hits mainstream according to: https://caniuse.com/mdn-css_at-rules_font-face_size-adjust

See the current implementation percentage by today used browser

What does this mean?

You can use the following CSS definition:

@font-face {
  font-family: 'Lato';
  src: url('/static/fonts/Lato.woff2') format('woff2');
  font-weight: 400;
}

@font-face {
    font-family: "Lato-fallback";
    size-adjust: 97.38%;
    ascent-override: 99%;
    src: local("Arial");
}

h1 {
    font-family: Lato, Lato-fallback, sans-serif;
}

As you can see we define a fallback version of our webfont (in our case Lato) and this fallback version is just a refernce to "Arial", which is a safe web font. But with size-adjust we can tweak the size of the fallback font. The attribute ascent-override has the same implementation rate than size-adjust.

Getting the adjustment settings

But now you wonder, where do i get those adjustment sizes. This nice little page calculates them for you and gives you the complete CSS for the custom fallback font:

https://deploy-preview-15--upbeat-shirley-608546.netlify.app/perfect-ish-font-fallback/?font=Montserrat

How do I fix "fallback" weight for different fonts?

1 Answers1