Avoid to apply web fonts inefficiently with Elementor

Table of Contents

• Bad way to seperately apply font type in Elementor
• Astra – Global Base Typography Setting
• Noto Sans JPComes with inefficient way of font setting in Elementor
• Noto Sans TCComes with custom CSS way for controlling elements efficiently
• You may also like to read
• Conclusion
  • The priorities of web font solutions that I recommend:
• Advanced
  • Fonts – block, swap, fallback, optional

Bad way to seperately apply font type in Elementor

• 

• 

Astra – Global Base Typography Setting

• 

• 

Noto Sans JP
Comes with inefficient way of font setting in Elementor

Noto Sans TC
Comes with custom CSS way for controlling elements efficiently

---

You may also like to read

How to Add Custom CSS to WordPress: 5 Methods Including Block Editor & Elementor

如何在 WordPress 自訂 CSS 語法：5 種，包括區塊編輯器與 Elementor

Conclusion

The priorities of web font solutions that I recommend:

1. Custom CSS, no matter of font-face or @import
2. Astra or other themes tuned fine
3. Elementor

Advanced

Fonts – block, swap, fallback, optional

Controlling Font Performance with font-display
https://developers.google.com/web/updates/2016/02/font-display

block, swap, fallback, optional
https://css-tricks.com/almanac/properties/f/font-display/

FOUT, FOIT, FOFT
https://css-tricks.com/really-dislike-fout-font-display-optional-might-jam/

With my experiences, I suggest

font-display: swap

or

font-display: fallback

which are better than others in most cases.

QR Code