Categories
Optimization Web Design WordPress

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 JP
Comes with inefficient way of font setting in Elementor

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

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

Noto Sans TC comes with custom CSS way for control elements efficiently
Apply Google Fonts with font face by font-face

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.

By Green

AMP, Branding, Copywriting, Marketing, Multilingual, WordPress - https://facekungfu.com/

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.