Fallback for my Text Formats

[fabiandraxl]

Hey there,

Just noticed that on certain older browser versions the text formats built on WOFF2 files are not displayed correctly or are replaced by Times New Roman by default. Is it possible here at least somehow to integrate a specified fallback to the default fonts for each Text Format for my page?

Would like to generate different fallbacks for each format.

For example:
Format XY with sans serif webfont XY = Helvetica, Arial (fallback)
or format YZ with serif webfont YZ = Times New Roman, Georgia ...

Thank you very much!
Fabian

[Richard]

Dear Fabian

@fabiandraxl

It should be fine to apply fallback to Text Formats 🌝
In this thread Armin explains adding CSS to the Text Format:

http://laythemeforum.com:4567/topic/917/activate-styllistic-sets/6|

<style>
._Default{
     font-family: Merriweather, Impact, Serif;
}
</style>

https://css-tricks.com/css-basics-fallback-font-stacks-robust-web-typography/

---

Helpful Links:

https://laytheme.com/documentation/textformats-and-webfonts.html

http://laythemeforum.com:4567/topic/6476/font-encoded-in-base64/4

---

Best wishes Fabian! ⭐️

Richard

[fabiandraxl]

Hej @Richard,

Thanks for your answer!

So is it enough if I add the following Code to my page (https:fabiandraxl.com) under Custom Code:

._default{
    font-size: 17px;
    line-height: 1.45;
    font-family: arial;
    letter-spacing: -0.55px;
    word-spacing: 0px;
    font-weight: 500;
    colour: black;
    visibility: visible;
}

Would I have to do this for every text format (HTML class)? Won't this overwrite my original text format? How can I check if it worked, do you have a recommendation to test the page?

Thank you, Fabi

[Richard]

Dear Fabi

@fabiandraxl

You may wish to look into how fallback fonts work again,

https://www.w3schools.com/css/css_font_fallbacks.asp

The following code:

._default{
    font-size: 17px;
    line-height: 1.45;
    font-family: arial;
    letter-spacing: -0.55px;
    word-spacing: 0px;
    font-weight: 500;
    colour: black;
    visibility: visible;
}

Will only define a single font family 'arial' along with some font properties (size, weight etc) . I dont think the code specifies any fallback.

  font-family: "Times New Roman", Times, serif;

---

Best

Richard