{"id":26624,"date":"2020-11-13T19:54:14","date_gmt":"2020-11-13T11:54:14","guid":{"rendered":"https:\/\/facekungfu.com\/?p=26624"},"modified":"2020-12-01T23:40:12","modified_gmt":"2020-12-01T15:40:12","slug":"avoid-to-apply-web-fonts-everywhere-unefficiently-with-elementor","status":"publish","type":"post","link":"https:\/\/facekungfu.com\/en\/avoid-to-apply-web-fonts-everywhere-unefficiently-with-elementor\/","title":{"rendered":"Avoid to apply web fonts  inefficiently with Elementor"},"content":{"rendered":"<h2 class=\"simpletoc-title\">Table of Contents<\/h2>\n<ul class=\"simpletoc-list\">\n<li><a href=\"#bad-way-to-seperately-apply-font-type-in-elementor\">Bad way to seperately apply font type in Elementor<\/a>\n\n<\/li>\n<li><a href=\"#astra-global-base-typography-setting\">Astra &#8211; Global Base Typography Setting<\/a>\n\n<\/li>\n<li><a href=\"#noto-sans-jpcomes-with-inefficient-way-of-font-setting-in-elementor\">Noto Sans JPComes with inefficient way of font setting in Elementor<\/a>\n\n<\/li>\n<li><a href=\"#noto-sans-tccomes-with-custom-css-way-for-controlling-elements-efficiently\">Noto Sans TCComes with custom CSS way for controlling elements efficiently<\/a>\n\n<\/li>\n<li><a href=\"#you-may-also-like-to-read\">You may also like to read<\/a>\n\n<\/li>\n<li><a href=\"#conclusion\">Conclusion<\/a>\n\n\n<ul><li>\n<a href=\"#the-priorities-of-web-font-solutions-that-i-recommend\">The priorities of web font solutions that I recommend:<\/a>\n\n<\/li>\n<\/ul>\n<li><a href=\"#advanced\">Advanced<\/a>\n\n\n<ul><li>\n<a href=\"#fonts-block-swap-fallback-optional\">Fonts &#8211; block, swap, fallback, optional<\/a>\n<\/li>\n<\/ul>\n<\/li><\/ul>\n\n<h2 class=\"wp-block-heading\" id=\"bad-way-to-seperately-apply-font-type-in-elementor\">Bad way to seperately apply font type in Elementor<\/h2>\n\n\n<figure class=\"wp-block-gallery aligncenter columns-2 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"378\" height=\"891\" data-attachment-id=\"26625\" data-permalink=\"https:\/\/facekungfu.com\/en\/avoid-to-apply-web-fonts-everywhere-unefficiently-with-elementor\/bad-way-to-seperately-apply-font-type-in-elementor-slides-button\/\" data-orig-file=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Bad-way-to-seperately-apply-font-type-in-Elementor-Slides-Button.png\" data-orig-size=\"378,891\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Bad way to seperately apply font type in Elementor &#8211; Slides Button\" data-image-description=\"&lt;p&gt;Bad way to seperately apply font type in Elementor &#8211; Slides Button&lt;\/p&gt;\n\" data-image-caption=\"&lt;p&gt;Bad way to seperately apply font type in Elementor &#8211; Slides Button&lt;\/p&gt;\n\" data-medium-file=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Bad-way-to-seperately-apply-font-type-in-Elementor-Slides-Button.png\" data-large-file=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Bad-way-to-seperately-apply-font-type-in-Elementor-Slides-Button.png\" src=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Bad-way-to-seperately-apply-font-type-in-Elementor-Slides-Button.png\" alt=\"Bad way to seperately apply font type in Elementor - Slides Button\" data-id=\"26625\" data-full-url=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Bad-way-to-seperately-apply-font-type-in-Elementor-Slides-Button.png\" data-link=\"https:\/\/facekungfu.com\/?attachment_id=26625\" class=\"wp-image-26625\" srcset=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Bad-way-to-seperately-apply-font-type-in-Elementor-Slides-Button.png 378w, https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Bad-way-to-seperately-apply-font-type-in-Elementor-Slides-Button-150x354.png 150w\" sizes=\"auto, (max-width: 378px) 100vw, 378px\" \/><figcaption class=\"blocks-gallery-item__caption\">Bad way to seperately apply font type in Elementor &#8211; Slides Button<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"378\" height=\"670\" data-attachment-id=\"26630\" data-permalink=\"https:\/\/facekungfu.com\/en\/avoid-to-apply-web-fonts-everywhere-unefficiently-with-elementor\/bad-way-to-seperately-apply-font-type-in-elementor-slides-title\/\" data-orig-file=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Bad-way-to-seperately-apply-font-type-in-Elementor-Slides-Title.png\" data-orig-size=\"378,670\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Bad way to seperately apply font type in Elementor &#8211; Slides Title\" data-image-description=\"&lt;p&gt;Bad way to seperately apply font type in Elementor &#8211; Slides Title&lt;\/p&gt;\n\" data-image-caption=\"&lt;p&gt;Bad way to seperately apply font type in Elementor &#8211; Slides Title&lt;\/p&gt;\n\" data-medium-file=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Bad-way-to-seperately-apply-font-type-in-Elementor-Slides-Title.png\" data-large-file=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Bad-way-to-seperately-apply-font-type-in-Elementor-Slides-Title.png\" src=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Bad-way-to-seperately-apply-font-type-in-Elementor-Slides-Title.png\" alt=\"Bad way to seperately apply font type in Elementor - Slides Title\" data-id=\"26630\" data-full-url=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Bad-way-to-seperately-apply-font-type-in-Elementor-Slides-Title.png\" data-link=\"https:\/\/facekungfu.com\/?attachment_id=26630\" class=\"wp-image-26630\" srcset=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Bad-way-to-seperately-apply-font-type-in-Elementor-Slides-Title.png 378w, https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Bad-way-to-seperately-apply-font-type-in-Elementor-Slides-Title-150x266.png 150w\" sizes=\"auto, (max-width: 378px) 100vw, 378px\" \/><figcaption class=\"blocks-gallery-item__caption\">Bad way to seperately apply font type in Elementor &#8211; Slides Title<\/figcaption><\/figure><\/li><\/ul><\/figure>\n\n\n<h2 class=\"wp-block-heading\" id=\"astra-global-base-typography-setting\">Astra &#8211; Global Base Typography Setting<\/h2>\n\n\n<figure class=\"wp-block-gallery aligncenter columns-2 is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"431\" height=\"1080\" data-attachment-id=\"26634\" data-permalink=\"https:\/\/facekungfu.com\/en\/avoid-to-apply-web-fonts-everywhere-unefficiently-with-elementor\/astra-typography-import-noto-sans-tc-with-variants-300-and-400-only\/\" data-orig-file=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Astra-Typography-Import-Noto-Sans-TC-with-Variants-300-and-400-only.png\" data-orig-size=\"431,1080\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Astra Typography  &#8211; Import Noto Sans TC with Variants 300 and 400 only\" data-image-description=\"&lt;p&gt;Astra Typography  &#8211; Import Noto Sans TC with Variants 300 and 400 only&lt;\/p&gt;\n\" data-image-caption=\"&lt;p&gt;Astra Typography  &#8211; Import Noto Sans TC with Variants 300 and 400 only&lt;\/p&gt;\n\" data-medium-file=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Astra-Typography-Import-Noto-Sans-TC-with-Variants-300-and-400-only.png\" data-large-file=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Astra-Typography-Import-Noto-Sans-TC-with-Variants-300-and-400-only.png\" src=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Astra-Typography-Import-Noto-Sans-TC-with-Variants-300-and-400-only.png\" alt=\"Astra Typography  - Import Noto Sans TC with Variants 300 and 400 only\" data-id=\"26634\" data-full-url=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Astra-Typography-Import-Noto-Sans-TC-with-Variants-300-and-400-only.png\" data-link=\"https:\/\/facekungfu.com\/?attachment_id=26634\" class=\"wp-image-26634\" srcset=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Astra-Typography-Import-Noto-Sans-TC-with-Variants-300-and-400-only.png 431w, https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Astra-Typography-Import-Noto-Sans-TC-with-Variants-300-and-400-only-150x376.png 150w\" sizes=\"auto, (max-width: 431px) 100vw, 431px\" \/><figcaption class=\"blocks-gallery-item__caption\">Astra Typography  &#8211; Import Noto Sans TC with Variants 300 and 400 only<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"431\" height=\"1080\" data-attachment-id=\"26649\" data-permalink=\"https:\/\/facekungfu.com\/en\/avoid-to-apply-web-fonts-everywhere-unefficiently-with-elementor\/astra-typography-default-system-font\/\" data-orig-file=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Astra-Typography-Default-System-Font.png\" data-orig-size=\"431,1080\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Astra-Typography-Default-System-Font\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Astra-Typography-Default-System-Font.png\" data-large-file=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Astra-Typography-Default-System-Font.png\" src=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Astra-Typography-Default-System-Font.png\" alt=\"\" data-id=\"26649\" data-full-url=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Astra-Typography-Default-System-Font.png\" data-link=\"https:\/\/facekungfu.com\/en\/avoid-to-apply-web-fonts-everywhere-unefficiently-with-elementor\/astra-typography-default-system-font\/\" class=\"wp-image-26649\" srcset=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Astra-Typography-Default-System-Font.png 431w, https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Astra-Typography-Default-System-Font-150x376.png 150w\" sizes=\"auto, (max-width: 431px) 100vw, 431px\" \/><figcaption class=\"blocks-gallery-item__caption\">Astra Typography &#8211; Default System Font<\/figcaption><\/figure><\/li><\/ul><\/figure>\n\n\n<h2 class=\"wp-block-heading\" id=\"noto-sans-jpcomes-with-inefficient-way-of-font-setting-in-elementor\">Noto Sans JP<br>Comes with inefficient way of font setting in Elementor<\/h2>\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"2000\" height=\"269\" data-attachment-id=\"26641\" data-permalink=\"https:\/\/facekungfu.com\/en\/avoid-to-apply-web-fonts-everywhere-unefficiently-with-elementor\/noto-sans-jp-comes-with-inefficient-way-of-font-setting-in-elementor\/\" data-orig-file=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Noto-Sans-JP-comes-with-inefficient-way-of-font-setting-in-Elementor.png\" data-orig-size=\"2000,269\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Noto Sans JP comes with inefficient way of font setting in Elementor\" data-image-description=\"&lt;p&gt;Noto Sans JP comes with inefficient way of font setting in Elementor&lt;\/p&gt;\n\" data-image-caption=\"&lt;p&gt;Noto Sans JP comes with inefficient way of font setting in Elementor&lt;\/p&gt;\n\" data-medium-file=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Noto-Sans-JP-comes-with-inefficient-way-of-font-setting-in-Elementor.png\" data-large-file=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Noto-Sans-JP-comes-with-inefficient-way-of-font-setting-in-Elementor.png\" src=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Noto-Sans-JP-comes-with-inefficient-way-of-font-setting-in-Elementor.png\" alt=\"Noto Sans JP comes with inefficient way of font setting in Elementor\" class=\"wp-image-26641\" srcset=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Noto-Sans-JP-comes-with-inefficient-way-of-font-setting-in-Elementor.png 2000w, https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Noto-Sans-JP-comes-with-inefficient-way-of-font-setting-in-Elementor-1200x161.png 1200w, https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Noto-Sans-JP-comes-with-inefficient-way-of-font-setting-in-Elementor-1980x266.png 1980w, https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Noto-Sans-JP-comes-with-inefficient-way-of-font-setting-in-Elementor-150x20.png 150w\" sizes=\"auto, (max-width: 2000px) 100vw, 2000px\" \/><figcaption>Noto Sans JP comes with inefficient way of font setting in Elementor<\/figcaption><\/figure>\n\n\n<h2 class=\"wp-block-heading\" id=\"noto-sans-tccomes-with-custom-css-way-for-controlling-elements-efficiently\">Noto Sans TC<br>Comes with custom CSS way for controlling elements efficiently<\/h2>\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1470\" height=\"359\" data-attachment-id=\"26643\" data-permalink=\"https:\/\/facekungfu.com\/en\/avoid-to-apply-web-fonts-everywhere-unefficiently-with-elementor\/noto-sans-tc-comes-with-custom-css-way-for-control-elements-efficiently\/\" data-orig-file=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Noto-Sans-TC-comes-with-custom-CSS-way-for-control-elements-efficiently.png\" data-orig-size=\"1470,359\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Noto Sans TC comes with custom CSS way for control elements efficiently\" data-image-description=\"&lt;p&gt;Noto Sans TC comes with custom CSS way for control elements efficiently&lt;\/p&gt;\n\" data-image-caption=\"&lt;p&gt;Noto Sans TC comes with custom CSS way for control elements efficiently&lt;\/p&gt;\n\" data-medium-file=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Noto-Sans-TC-comes-with-custom-CSS-way-for-control-elements-efficiently.png\" data-large-file=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Noto-Sans-TC-comes-with-custom-CSS-way-for-control-elements-efficiently.png\" src=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Noto-Sans-TC-comes-with-custom-CSS-way-for-control-elements-efficiently.png\" alt=\"Noto Sans TC comes with custom CSS way for control elements efficiently\" class=\"wp-image-26643\" srcset=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Noto-Sans-TC-comes-with-custom-CSS-way-for-control-elements-efficiently.png 1470w, https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Noto-Sans-TC-comes-with-custom-CSS-way-for-control-elements-efficiently-1200x293.png 1200w, https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Noto-Sans-TC-comes-with-custom-CSS-way-for-control-elements-efficiently-150x37.png 150w\" sizes=\"auto, (max-width: 1470px) 100vw, 1470px\" \/><figcaption>Noto Sans TC comes with custom CSS way for control elements efficiently<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1707\" height=\"962\" data-attachment-id=\"26646\" data-permalink=\"https:\/\/facekungfu.com\/en\/avoid-to-apply-web-fonts-everywhere-unefficiently-with-elementor\/apply-google-fonts-with-font-face-by-font-face\/\" data-orig-file=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Apply-Google-Fonts-with-font-face-by-font-face.png\" data-orig-size=\"1707,962\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Apply-Google-Fonts-with-font-face-by-font-face\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Apply-Google-Fonts-with-font-face-by-font-face.png\" data-large-file=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Apply-Google-Fonts-with-font-face-by-font-face.png\" src=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Apply-Google-Fonts-with-font-face-by-font-face.png\" alt=\"\" class=\"wp-image-26646\" srcset=\"https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Apply-Google-Fonts-with-font-face-by-font-face.png 1707w, https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Apply-Google-Fonts-with-font-face-by-font-face-1200x676.png 1200w, https:\/\/facekungfu.com\/wp-content\/uploads\/2020\/11\/Apply-Google-Fonts-with-font-face-by-font-face-150x85.png 150w\" sizes=\"auto, (max-width: 1707px) 100vw, 1707px\" \/><figcaption>Apply Google Fonts with font face by font-face<\/figcaption><\/figure>\n\n\n\n<hr class=\"wp-block-separator is-style-dots\"\/>\n\n\n<h2 class=\"wp-block-heading\" id=\"you-may-also-like-to-read\">You may also like to read<\/h2>\n\n\n<figure class=\"wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-facekungfu-studio\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"QjxDgkKDN9\"><a href=\"https:\/\/facekungfu.com\/en\/five-methods-of-custom-css-including-for-gutenberg-block-editor-and-elementor\/\">How to Add Custom CSS to WordPress: 5 Methods Including Block Editor &#038; Elementor<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"&#8220;How to Add Custom CSS to WordPress: 5 Methods Including Block Editor &#038; Elementor&#8221; &#8212; Facekungfu Studio\" src=\"https:\/\/facekungfu.com\/en\/five-methods-of-custom-css-including-for-gutenberg-block-editor-and-elementor\/embed\/#?secret=vHblRiWxRV#?secret=QjxDgkKDN9\" data-secret=\"QjxDgkKDN9\" width=\"580\" height=\"327\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><figcaption>How to Add Custom CSS to WordPress: 5 Methods Including Block Editor &amp; Elementor<br><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-facekungfu-studio\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"6JgjtOFGEy\"><a href=\"https:\/\/facekungfu.com\/en\/five-methods-of-custom-css-including-for-gutenberg-block-editor-and-elementor\/\">\u5982\u4f55\u5728 WordPress \u81ea\u8a02 CSS \u8a9e\u6cd5\uff1a5 \u7a2e\uff0c\u5305\u62ec\u5340\u584a\u7de8\u8f2f\u5668\u8207 Elementor<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"&#8220;\u5982\u4f55\u5728 WordPress \u81ea\u8a02 CSS \u8a9e\u6cd5\uff1a5 \u7a2e\uff0c\u5305\u62ec\u5340\u584a\u7de8\u8f2f\u5668\u8207 Elementor&#8221; &#8212; Facekungfu Studio\" src=\"https:\/\/facekungfu.com\/en\/five-methods-of-custom-css-including-for-gutenberg-block-editor-and-elementor\/embed\/#?secret=NDSAYCunet#?secret=6JgjtOFGEy\" data-secret=\"6JgjtOFGEy\" width=\"580\" height=\"327\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><figcaption>\u5982\u4f55\u5728 WordPress \u81ea\u8a02 CSS \u8a9e\u6cd5\uff1a5 \u7a2e\uff0c\u5305\u62ec\u5340\u584a\u7de8\u8f2f\u5668\u8207 Elementor<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\">Conclusion<\/h2>\n\n<h3 class=\"wp-block-heading\" id=\"the-priorities-of-web-font-solutions-that-i-recommend\">The priorities of web font solutions that I recommend:<\/h3>\n\n\n<ol class=\"wp-block-list\"><li>Custom CSS, no matter of <code>font-face<\/code> or <code>@import<\/code><\/li><li>Astra or other themes tuned fine<\/li><li>Elementor<\/li><\/ol>\n\n\n\n<p><\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"advanced\">Advanced<\/h2>\n\n<h3 class=\"wp-block-heading\" id=\"fonts-block-swap-fallback-optional\">Fonts &#8211; block, swap, fallback, optional<\/h3>\n\n\n<p>Controlling Font Performance with font-display<br><a href=\"https:\/\/developers.google.com\/web\/updates\/2016\/02\/font-display\">https:\/\/developers.google.com\/web\/updates\/2016\/02\/font-display<\/a><\/p>\n\n\n\n<p>block, swap, fallback, optional<br><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-display\/\">https:\/\/css-tricks.com\/almanac\/properties\/f\/font-display\/<\/a><\/p>\n\n\n\n<p> FOUT, FOIT, FOFT<br><a href=\"https:\/\/css-tricks.com\/really-dislike-fout-font-display-optional-might-jam\/\">https:\/\/css-tricks.com\/really-dislike-fout-font-display-optional-might-jam\/<\/a><\/p>\n\n\n\n<p>With my experiences, I suggest<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>font-display: swap<\/code><\/pre>\n\n\n\n<p>or<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>font-display: fallback<\/code><\/pre>\n\n\n\n<p>which are better than others in most cases.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bad way to seperately apply font type in Elementor Astra &#8211; 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: Custom CSS, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"templates\/template-cover.php","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[895,786,588],"tags":[926,962],"class_list":["post-26624","post","type-post","status-publish","format-standard","hentry","category-optimization","category-web-design","category-wordpress","tag-css","tag-font"],"jetpack_publicize_connections":[],"featured_image_src":null,"featured_image_src_square":null,"author_info":{"display_name":"Green","author_link":"https:\/\/facekungfu.com\/en\/author\/yanggh\/"},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/facekungfu.com\/en\/wp-json\/wp\/v2\/posts\/26624","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/facekungfu.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/facekungfu.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/facekungfu.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/facekungfu.com\/en\/wp-json\/wp\/v2\/comments?post=26624"}],"version-history":[{"count":0,"href":"https:\/\/facekungfu.com\/en\/wp-json\/wp\/v2\/posts\/26624\/revisions"}],"wp:attachment":[{"href":"https:\/\/facekungfu.com\/en\/wp-json\/wp\/v2\/media?parent=26624"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/facekungfu.com\/en\/wp-json\/wp\/v2\/categories?post=26624"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/facekungfu.com\/en\/wp-json\/wp\/v2\/tags?post=26624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}