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


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


Fonts – block, swap, fallback, optional

Controlling Font Performance with font-display

block, swap, fallback, optional


With my experiences, I suggest

font-display: swap


font-display: fallback

which are better than others in most cases.

QR Code

By Green

AMP, Branding, Copywriting, Marketing, Multilingual, WordPress -

Leave a Reply

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