1

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

Temani Afif
  • 211,628
  • 17
  • 234
  • 311
Swiking
  • 15
  • 4
  • 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

0 Answers0