Avoid to apply web fonts inefficiently with Elementor

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

https://ke2b.comfive-methods-of-custom-css-including-for-gutenberg-block-editor-and-elementor/

https://facekungfu.com/zh-hant/five-methods-of-custom-css-including-for-gutenberg-block-editor-and-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 to This Article

Like this:

Like Loading...