{"id":4296261,"date":"2022-04-21T16:22:57","date_gmt":"2022-04-21T14:22:57","guid":{"rendered":"https:\/\/wp-rocket.me\/?post_type=core_web_vitals_hub&#038;p=4296261"},"modified":"2023-09-13T17:44:52","modified_gmt":"2023-09-13T15:44:52","slug":"ensure-text-remains-visible-webfont-load","status":"publish","type":"core_web_vitals_hub","link":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/ensure-text-remains-visible-webfont-load\/","title":{"rendered":"How to Ensure Text Remains Visible During Webfont Load"},"content":{"rendered":"<p>If you have ever run a performance audit on PageSpeed insights, Lighthouse may have recommended to \u201censure text remains visible during webfont load\u201d.&nbsp;<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1999\" height=\"647\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Ensure-text-remains-visible-during-webfont-load-warning.png\" alt=\"\u201cEnsure text remains visible during webfont load\u201d warning - Source: PageSpeed Insights\n\" class=\"wp-image-4296392\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Ensure-text-remains-visible-during-webfont-load-warning.png 1999w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Ensure-text-remains-visible-during-webfont-load-warning-310x100.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Ensure-text-remains-visible-during-webfont-load-warning-768x249.png 768w\" sizes=\"(max-width: 1999px) 100vw, 1999px\" \/><figcaption class=\"wp-element-caption\">\u201cEnsure text remains visible during webfont load\u201d warning &#8211; Source: <a href=\"https:\/\/pagespeed.web.dev\/\">PageSpeed <\/a>Insights<br><\/figcaption><\/figure><p>When you use a web font like Font Awesome, Adobe Font, or Google Fonts, they don&#8217;t exist on the visitor&#8217;s computer: they have to be downloaded from the internet. This takes time and Lighthouse triggers a warning if a website does not effectively load web fonts.<\/p><p><strong>A system font vs a webfont<br><\/strong><br>There are two types of fonts: the system fonts and the webfonts. The first one is designed to be installed and read on your computer with extensions like .ttf or .otf.<br>On the other hand, web fonts are specifically made for use on the internet and can be loaded with the \u201c@font-face CSS\u201d declaration. This rule tells the browser which web font to download to apply the proper custom font to a string of text. It comes with extensions like .WOFF, TrueType or SVG.<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"600\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Web-fonts-vs-System-fonts-Source-WP-Rocket.png\" alt=\"Web fonts vs system fonts - Source: WP Rocket\n\" class=\"wp-image-4296404\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Web-fonts-vs-System-fonts-Source-WP-Rocket.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Web-fonts-vs-System-fonts-Source-WP-Rocket-260x195.png 260w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Web-fonts-vs-System-fonts-Source-WP-Rocket-768x576.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Web-fonts-vs-System-fonts-Source-WP-Rocket-80x60.png 80w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Web-fonts-vs-System-fonts-Source-WP-Rocket-120x90.png 120w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Web fonts vs system fonts &#8211; Source: <a href=\"https:\/\/docs.wp-rocket.me\/\">WP Rocket<\/a><br><\/figcaption><\/figure><p>In this article, we explain what the PageSpeed Insights warning means and what\u2019s the impact on performance. We also show you how to fix the issue manually or by using a WordPress plugin.&nbsp;&nbsp;<\/p><h2 class=\"wp-block-heading\">What Ensure Text Remains Visible During Webfont Load Means<\/h2><p>Ensuring that text remains visible during webfont load means that the text on a webpage should never be hidden, even if the web font has not loaded yet.&nbsp;<\/p><p>To deal with this loading gap, some browsers hide the text until the fonts are loaded, causing a flash of invisible text (FOIT).&nbsp;<\/p><h3 class=\"wp-block-heading\">What Is Flash of Invisible Text (FOIT)?&nbsp;<\/h3><p>FOIT (flash of invisible text) happens if the browser waits too long to load a webfont. In the example below, the actual text has loaded and can be highlighted, but it remains invisible as the webfont has not fully loaded yet:<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"600\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Flash-of-Invisible-Text-instead-of-displaying-This-is-my-text-.png\" alt=\"Flash of Invisible Text instead of displaying \u201cThis is my text\u201d - Source: WP Rocket\n\" class=\"wp-image-4296412\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Flash-of-Invisible-Text-instead-of-displaying-This-is-my-text-.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Flash-of-Invisible-Text-instead-of-displaying-This-is-my-text--260x195.png 260w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Flash-of-Invisible-Text-instead-of-displaying-This-is-my-text--768x576.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Flash-of-Invisible-Text-instead-of-displaying-This-is-my-text--80x60.png 80w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Flash-of-Invisible-Text-instead-of-displaying-This-is-my-text--120x90.png 120w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Flash of Invisible Text instead of displaying \u201cThis is my text\u201d &#8211; Source: <a href=\"https:\/\/wp-rocket.me\/\">WP Rocket<\/a><br><\/figcaption><\/figure><p>As a consequence, Lighthouse will flag any font URLs that flash this invisible text.<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1999\" height=\"647\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/URL-on-your-site-using-a-font-URL-that-is-flashing-invisible-text-.png\" alt=\"URL on your site using a font URL that is flashing invisible text - Source: PSI\n\" class=\"wp-image-4296420\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/URL-on-your-site-using-a-font-URL-that-is-flashing-invisible-text-.png 1999w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/URL-on-your-site-using-a-font-URL-that-is-flashing-invisible-text--310x100.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/URL-on-your-site-using-a-font-URL-that-is-flashing-invisible-text--768x249.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/URL-on-your-site-using-a-font-URL-that-is-flashing-invisible-text--185x60.png 185w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/URL-on-your-site-using-a-font-URL-that-is-flashing-invisible-text--278x90.png 278w\" sizes=\"(max-width: 1999px) 100vw, 1999px\" \/><figcaption class=\"wp-element-caption\">URL on your site using a font URL that is flashing invisible text &#8211; Source: PSI<br><\/figcaption><\/figure><figure class=\"wp-block-table\"><table><tbody><tr><td>\ud83d\udcd6&nbsp; \u201cEnsure text remains visible during Webfont load\u201d = Text should be user-visible even while web fonts are loading.&nbsp;&nbsp;<\/td><\/tr><\/tbody><\/table><\/figure><h3 class=\"wp-block-heading\">What <em>Exactly <\/em>Triggers This PageSpeed Insights Warning?<\/h3><p>The \u201censure text remains visible during webfont load\u201d warning will trigger if Lighthouse finds one web font URL <strong>without<\/strong> one of the attributes below:&nbsp;<\/p><ul class=\"wp-block-list\"><li>swap<\/li>\n\n<li>fallback<\/li>\n\n<li>optional<\/li>\n\n<li>block<\/li><\/ul><p>To find out, Lighthouse runs through all the web fonts displayed in the CSS and checks if one of the font-display attributes has been specified for each web font.&nbsp;<\/p><p>This webfont issue affects the speed of your page because some browsers will hide all the text while this \u201cloading font time\u201d is happening. Let\u2019s see the actual impact of webfonts on performance.&nbsp;<\/p><h2 class=\"wp-block-heading\">What\u2019s the Impact of Webfont Load on Performance?<\/h2><p>Webfont loads affect page performance because the browser cannot render the text to the user immediately: it needs to wait for the webfont to be ready. Let\u2019s go over the 4 major impacts of FOIT on performance, including the <a href=\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/\">Core Web Vitals<\/a>.<\/p><h3 class=\"wp-block-heading\">1. Affecting the PageSpeed Insights Score<\/h3><p>The FOIT (Flash of Invisible Text) issue impacts your performance score on the Google PageSpeed Insights report. In the example below it\u2019s said that if we remove the FOIT and ensure that the text is visible during loading, we could save 333 ms:&nbsp;<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1046\" height=\"224\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Potential-savings-if-we-ensure-that-text-remains-visible-during-webfont-load-Source-PageSpeed-Insights.png\" alt=\"Potential savings if we ensure that text remains visible during webfont load - Source: PageSpeed Insights\n\" class=\"wp-image-4296433\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Potential-savings-if-we-ensure-that-text-remains-visible-during-webfont-load-Source-PageSpeed-Insights.png 1046w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Potential-savings-if-we-ensure-that-text-remains-visible-during-webfont-load-Source-PageSpeed-Insights-310x66.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Potential-savings-if-we-ensure-that-text-remains-visible-during-webfont-load-Source-PageSpeed-Insights-768x164.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Potential-savings-if-we-ensure-that-text-remains-visible-during-webfont-load-Source-PageSpeed-Insights-190x41.png 190w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Potential-savings-if-we-ensure-that-text-remains-visible-during-webfont-load-Source-PageSpeed-Insights-420x90.png 420w\" sizes=\"(max-width: 1046px) 100vw, 1046px\" \/><figcaption class=\"wp-element-caption\">Potential savings if we ensure that text remains visible during webfont load &#8211; Source: <a href=\"https:\/\/pagespeed.web.dev\/\">PageSpeed Insights<\/a><br><\/figcaption><\/figure><p>Additionally, PageSpeed Insights is flagging another issue related to webfonts in the \u201c<a href=\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/eliminate-render-blocking-javascript-css\/\">Eliminate render-blocking resources<\/a>&#8221; section. According to Lighthouse, we&nbsp; could save 930 ms saved if we optimized properly the web fonts CSS:<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1037\" height=\"245\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Potential-savings-if-we-eliminate-render-blocking-resources-related-to-web-font-CSS-Source.png\" alt=\"Potential savings if we eliminate render-blocking resources related to web font CSS- Source: PageSpeed Insights\n\" class=\"wp-image-4296443\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Potential-savings-if-we-eliminate-render-blocking-resources-related-to-web-font-CSS-Source.png 1037w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Potential-savings-if-we-eliminate-render-blocking-resources-related-to-web-font-CSS-Source-310x73.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Potential-savings-if-we-eliminate-render-blocking-resources-related-to-web-font-CSS-Source-768x181.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Potential-savings-if-we-eliminate-render-blocking-resources-related-to-web-font-CSS-Source-190x45.png 190w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Potential-savings-if-we-eliminate-render-blocking-resources-related-to-web-font-CSS-Source-381x90.png 381w\" sizes=\"(max-width: 1037px) 100vw, 1037px\" \/><figcaption class=\"wp-element-caption\">Potential savings if we eliminate render-blocking resources related to web font CSS- Source: <a href=\"https:\/\/pagespeed.web.dev\/\">PageSpeed Insights<\/a><br><\/figcaption><\/figure><h3 class=\"wp-block-heading\">2. Impacting the Cumulative Layout Shift Grade (Core Web Vitals)<\/h3><p>To optimize and <a href=\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/improve-cumulative-layout-shift\/\">improve the Cumulative Layout Shift<\/a> grade, you should avoid sudden layout shifts caused by web fonts. Ensuring your text remains visible while the web font loads help a lot in preventing unexpected content moves (without user interaction). Downloading and rendering web fonts can cause layout shifts if the flash of invisible text happens.<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"295\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Headline-web-font-loading-causing-a-sudden-layout-shift-Source-.png\" alt=\"Headline web font loading causing a sudden layout shift - Source: simonhearne.com\n\" class=\"wp-image-4296483\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Headline-web-font-loading-causing-a-sudden-layout-shift-Source-.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Headline-web-font-loading-causing-a-sudden-layout-shift-Source--310x114.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Headline-web-font-loading-causing-a-sudden-layout-shift-Source--768x283.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Headline web font loading causing a sudden layout shift &#8211; Source: <a href=\"https:\/\/simonhearne.com\/2021\/layout-shifts-webfonts\/\">simonhearne.com<\/a><br><\/figcaption><\/figure><figure class=\"wp-block-table\"><table><tbody><tr><td>\ud83d\udcd6 Invisible text is shown until the web font is rendered \u2192 a sudden layout shift occurs \u2192 CLS grade impacted<\/td><\/tr><\/tbody><\/table><\/figure><h3 class=\"wp-block-heading\">3. Worsening First Contentful Paint and Largest Contentful Paint (Core Web Vitals) Grades<\/h3><p><a href=\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/improve-largest-contentful-paint\/\">Largest Contentful Paint (LCP)<\/a> goes hand in hand with <a href=\"https:\/\/wp-rocket.me\/lighthouse-performance-score-wordpress\/improve-first-contentful-paint\/\">First Contentful Paint (FCP) <\/a>as they tell you how long it takes for the first important content to be rendered to a visitor.<\/p><p>When a browser encounters a webfont that has not loaded yet, it hesitates between two solutions:&nbsp;<\/p><ul class=\"wp-block-list\"><li>Should I delay rendering text until the webfont has loaded?&nbsp;<\/li>\n\n<li>Should I render the text in a fallback font until the webfont arrives?<\/li><\/ul><p>The \u201cfont-display\u201d property is used to control this behavior, and this performance decision can affect FCP and LCP (and the CLS, which is the layout stability mentioned in the previous section).&nbsp;<\/p><h3 class=\"wp-block-heading\">4. Influencing the User Experience and the Conversions<\/h3><p>When the text is not visible during webfont load, the user experience is also impacted: no one likes a blank page while trying to access a website. The main title and text are crucial for users because they indicate if the site contains the desired information in a few seconds.&nbsp;<\/p><p>What&#8217;s more, if the website is perceived as slow and if a user has a disrupted browsing experience, they will be less likely to complete a booking or a purchase. In 2019, <a href=\"https:\/\/www.portent.com\/blog\/analytics\/research-site-speed-hurting-everyones-revenue.htm#:~:text=The%20first%205%20seconds%20of,(between%20seconds%200%2D5)\">Portent conducted a research<\/a> and studied the correlation between speed and conversions. This is what they found:&nbsp;<\/p><ul class=\"wp-block-list\"><li>0-4 second load time is best for conversion rates.<\/li>\n\n<li>The first 5 seconds of page load time have the highest impact on conversion rates.<\/li><\/ul><p>As a result, the first impression (especially in the first 4 seconds) defines whether the user will complete their purchase or not. &nbsp;<br><br>Webfonts can impact loading speed, performance, user experience, and even your sales! Fortunately, there are a few techniques to ensure that text remains visible during loading, and we go over them in the next two sections.&nbsp;<\/p><div id=\"om-nyrydv5iync8zrrulm5i-holder\"><\/div>\n\t<script>(function (d, u, ac) {\n\t\t\tvar s = d.createElement('script')\n\t\t\ts.type = 'text\/javascript'\n\t\t\ts.src = 'https:\/\/a.omappapi.com\/app\/js\/api.min.js'\n\t\t\ts.async = true\n\t\t\ts.dataset.user = u\n\t\t\ts.dataset.campaign = ac\n\t\t\td.getElementsByTagName('head')[0].appendChild(s)\n\t\t})(document, 20440, 'nyrydv5iync8zrrulm5i')<\/script><h2 class=\"wp-block-heading\">How to Fix Ensure Text Remains Visible During Webfont Load on WordPress (Manually)<\/h2><p>To fix the \u201censure text remains visible during webfont\u201d warning, you need to use the <strong>font-display:&nbsp; swap<\/strong> declaration on the web font. This simple attribute in your font\u2019s CSS fixes the invisible text issue on WordPress: it displays the text during web fonts loads.&nbsp;<\/p><p>In a practical example, your font CSS should look like this:<\/p><figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Before optimization<\/strong><\/td><td><strong>After optimization<\/strong><\/td><\/tr><tr><td>@font-face { font-family: Arial; }<\/td><td>@font-face { font-family: Arial; <strong>font-display: swap;<\/strong> }<\/td><\/tr><\/tbody><\/table><\/figure><p>This declaration fixes the PageSpeed Insights warning and moves the issue to the \u201cpassed audit\u201d section:&nbsp;<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1042\" height=\"133\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Passed-audit-webfont-is-using-font-display-swap.png\" alt=\"Passed audit: webfont is using font-display:swap - Source: PageSpeed Insights\n\" class=\"wp-image-4296500\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Passed-audit-webfont-is-using-font-display-swap.png 1042w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Passed-audit-webfont-is-using-font-display-swap-310x40.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Passed-audit-webfont-is-using-font-display-swap-768x98.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Passed-audit-webfont-is-using-font-display-swap-190x24.png 190w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Passed-audit-webfont-is-using-font-display-swap-705x90.png 705w\" sizes=\"(max-width: 1042px) 100vw, 1042px\" \/><figcaption class=\"wp-element-caption\">Passed audit: webfont is using font-display:swap &#8211; Source: <a href=\"https:\/\/pagespeed.web.dev\/\">PageSpeed Insights<\/a><br><\/figcaption><\/figure><figure class=\"wp-block-table\"><table><tbody><tr><td>\ud83d\udcd6&nbsp; <strong>font-display:swap<\/strong> CSS declaration = no more invisible text = no more PSI warning<\/td><\/tr><\/tbody><\/table><\/figure><h3 class=\"wp-block-heading\">What is The Effect of \u201cfont-display:swap\u201d on Webfonts?<\/h3><p>\u201cFont-display\u201d is an API that indicates the strategy chosen to display fonts on a web page. &#8220;Swap&#8221; specifies to the browser that any text using this font should be displayed immediately using a font present<strong> in the system<\/strong>: Flash of Unstyled Text.&nbsp;<\/p><p>The priority is to render the text, no matter if the font comes from the system first.&nbsp;<\/p><figure class=\"wp-block-table\"><table><tbody><tr><td>\ud83d\udca1 UX:&nbsp; it\u2019s better to display some text with a system font first rather than showing nothing.&nbsp;<\/td><\/tr><\/tbody><\/table><\/figure><p>This avoids the Flash of Invisible Text (FOIT) because the content is displayed with a system font until the custom web font is loaded. When the web font is ready, the system font is, of course, replaced.&nbsp;<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"600\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Flash-of-Invisible-Text-vs-Flash-of-Unstyled-Text.png.png\" alt=\"Flash of Invisible Text vs Flash of Unstyled Text - Source: WP Rocket\" class=\"wp-image-4299222\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Flash-of-Invisible-Text-vs-Flash-of-Unstyled-Text.png.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Flash-of-Invisible-Text-vs-Flash-of-Unstyled-Text.png-260x195.png 260w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Flash-of-Invisible-Text-vs-Flash-of-Unstyled-Text.png-768x576.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Flash-of-Invisible-Text-vs-Flash-of-Unstyled-Text.png-80x60.png 80w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Flash-of-Invisible-Text-vs-Flash-of-Unstyled-Text.png-120x90.png 120w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\"> Flash of Invisible Text vs Flash of Unstyled Text &#8211; Source: <a href=\"https:\/\/wp-rocket.me\/\">WP Rocket<\/a> <\/figcaption><\/figure><p>By including the CSS declaration<code> font-display:swap<\/code>, the FOIT becomes a FOUT like in our example below:&nbsp;<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"332\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/FOUT-System-font-applied-to-the-text-before-the-right-webfont.gif\" alt=\"FOUT: System font applied to the text before the right webfont - Source: Website Lepointgourmand.com\n\" class=\"wp-image-4296520\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/FOUT-System-font-applied-to-the-text-before-the-right-webfont.gif 600w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/FOUT-System-font-applied-to-the-text-before-the-right-webfont-310x172.gif 310w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><figcaption class=\"wp-element-caption\">FOUT: System font applied to the text before the right webfont &#8211; Source: <a href=\"https:\/\/lepointgourmand.com\/\">Website Lepointgourmand.com<\/a><br><\/figcaption><\/figure><figure class=\"wp-block-table\"><table><tbody><tr><td>\ud83d\udca1 Hint: To optimize the font loading process you should also <a href=\"https:\/\/wp-rocket.me\/blog\/font-preloading-best-practices\/#section-4\">preload the font above the fold<\/a> with the \u201cpreload\u201d mechanism:<br><br><code>&lt;link rel=\"preload\" href=\"yourfont.extension\"&gt;<\/code><br><br>This allows the browser to load in priority the underground resources without affecting the load of the other ones.&nbsp;<\/td><\/tr><\/tbody><\/table><\/figure><h3 class=\"wp-block-heading\">Implementing the CSS Declaration on Webfonts in WordPress<\/h3><p>To implement this change in WordPress, go to <strong>Appearance &gt; Theme Editor<\/strong> and open your CSS style sheet (style.css). Add a @font-face query and the \u201cswap\u201d attribute to reference your custom font and apply it to your website.&nbsp;<\/p><p>\u26a0\ufe0f&nbsp; <em>We recommend you to edit your style.css and functions.php files only if you feel comfortable with coding. Any wrong edits could break your site.&nbsp;<\/em><\/p><p>If you prefer to be on the safe side and save some precious time, you can use a WordPress plugin to remove this flashing invisible text and optimize your web fonts efficiently.&nbsp;<\/p><h2 class=\"wp-block-heading\">How to Fix Ensure Text Remains Visible During Webfont Load with a Plugin<\/h2><p>To stop the invisible text issue in WordPress, you can get some help from WordPress plugins like WP Rocket, FlyingPress, and Stringlocater.&nbsp;<\/p><h3 class=\"wp-block-heading\">1. <a href=\"https:\/\/wp-rocket.me\/features\/\">WP Rocket<\/a><\/h3><p>WP Rocket may help fix the FOIT and ensure that text remains visible during Webfont load. This is <a href=\"https:\/\/wp-rocket.me\/best-wordpress-caching-plugin\/\">one of the best caching plugins for WordPress<\/a> that optimizes the Google fonts by applying the <code>font-display: swap<\/code> attribute to them. <strong>WP Rocket <a href=\"https:\/\/docs.wp-rocket.me\/article\/1312-optimize-google-fonts\">automatically optimizes Google Fonts<\/a> upon its installation <\/strong>and instantly addresses the PageSpeed Insights warning related to such fonts.&nbsp;<\/p><p>WP Rocket also helps dealing with other fonts. Here\u2019s how.<strong><br><\/strong><\/p><ul class=\"wp-block-list\"><li>For other webfonts referred to within CSS files, WP Rocket will automatically apply the required font-display: swap; attribute by enabling either the <a href=\"https:\/\/docs.wp-rocket.me\/article\/1350-css-minify-combine\">Minify<\/a> or Optimize CSS delivery options.<\/li><\/ul><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"841\" height=\"254\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/CSS-optimization-3-15.png\" alt=\"\" class=\"wp-image-5976412\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/CSS-optimization-3-15.png 841w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/CSS-optimization-3-15-310x94.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/CSS-optimization-3-15-768x232.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/CSS-optimization-3-15-190x57.png 190w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/CSS-optimization-3-15-298x90.png 298w\" sizes=\"(max-width: 841px) 100vw, 841px\" \/><\/figure><ul class=\"wp-block-list\"><li>When the Remove Unused CSS option is enabled, the font-display: swap; descriptor is applied to fonts found in the resulting Used CSS file.<\/li><\/ul><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"417\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/10\/Remove-Unused-CSS-option-Source-WP-Rocket.png\" alt=\"Remove-Unused-CSS-option-Source-WP-Rocket\" class=\"wp-image-3800381\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/10\/Remove-Unused-CSS-option-Source-WP-Rocket.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/10\/Remove-Unused-CSS-option-Source-WP-Rocket-310x162.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/10\/Remove-Unused-CSS-option-Source-WP-Rocket-768x400.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure><p>In short, WP Rocket will take care of&nbsp;the webfont load and address the PageSpeed Insights recommendation.<\/p><p><strong>What if these options are enabled but you still have this warning?<\/strong><\/p><p>This is usually because the fonts are being loaded onto your site in a way that WP Rocket won\u2019t process:<\/p><ul class=\"wp-block-list\"><li>In a 3rd party stylesheet loaded using @import<\/li>\n\n<li>Loaded via JavaScript instead of in a stylesheet<\/li>\n\n<li>In a stylesheet that is already minified and therefore not processed by WP Rocket. <strong>Tip<\/strong>: Enable Combine CSS or Remove Unused CSS and you should resolve the issue.<br><\/li><\/ul><p>Another important font optimization made by WP Rocket is the \u201cPreload fonts\u201d option. This allows the browser to find the fonts faster and start downloading them as soon as possible. On the user side, you simply need to specify which fonts need to be preloaded:&nbsp;<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1418\" height=\"742\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Preload-fonts-section.png\" alt=\"Preload fonts section  - Source: WP Rocket\u2019s WordPress dashboard\" class=\"wp-image-4296544\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Preload-fonts-section.png 1418w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Preload-fonts-section-310x162.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Preload-fonts-section-768x402.png 768w\" sizes=\"(max-width: 1418px) 100vw, 1418px\" \/><figcaption class=\"wp-element-caption\">Preload fonts section&nbsp; &#8211; Source: WP Rocket\u2019s WordPress dashboard<\/figcaption><\/figure><p>For the more curious, this is what happens backstage: WP Rocket will apply the preload tag in the &lt;head&gt; of your site:<\/p><pre class=\"wp-block-code\"><code class=\"\">&lt;link rel=\"preload\" as=\"font\" href=\"https:\/\/example.com\/wp-content\/themes\/paperback\/inc\/fontawesome\/fonts\/fontawesome-webfont.woff2\" crossorigin&gt;&lt;br&gt;<\/code><\/pre><h3 class=\"wp-block-heading\">2. <a href=\"https:\/\/wordpress.org\/plugins\/swap-google-font-display\/\">FlyingPress<\/a><\/h3><p>FlyingPress is a freemium configurable speed optimization plugin for WordPress that fixes the invisible text (FOIT) and applies the :swap to the CSS @font-face rule. If the web font is not ready yet, there will be a fallback, and a system font will be used instead. When the web font is loaded, it will replace the system font.&nbsp;<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"425\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Font-optimization-section-Source-FlyingPress.png\" alt=\"Font optimization section - Source: FlyingPress\n\" class=\"wp-image-4296559\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Font-optimization-section-Source-FlyingPress.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Font-optimization-section-Source-FlyingPress-310x165.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Font-optimization-section-Source-FlyingPress-768x408.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Font-optimization-section-Source-FlyingPress-113x60.png 113w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Font-optimization-section-Source-FlyingPress-169x90.png 169w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Font optimization section &#8211; Source: FlyingPress<br><\/figcaption><\/figure><h3 class=\"wp-block-heading\">3. <a href=\"https:\/\/wordpress.org\/plugins\/string-locator\/\">Stringlocator<\/a><\/h3><p>This free plugin identifies the CSS with the @font-face code. It helps to search through your themes and plugins, which custom web font needs to be optimized.&nbsp;<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1491\" height=\"616\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Identifying-the-CSS-of-my-web-font-that-needs-the-swap-attribute.png\" alt=\"Identifying the CSS of my web font that needs the swap attribute - Source: Stringlocator\n\" class=\"wp-image-4296569\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Identifying-the-CSS-of-my-web-font-that-needs-the-swap-attribute.png 1491w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Identifying-the-CSS-of-my-web-font-that-needs-the-swap-attribute-310x128.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Identifying-the-CSS-of-my-web-font-that-needs-the-swap-attribute-768x317.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Identifying-the-CSS-of-my-web-font-that-needs-the-swap-attribute-145x60.png 145w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Identifying-the-CSS-of-my-web-font-that-needs-the-swap-attribute-218x90.png 218w\" sizes=\"(max-width: 1491px) 100vw, 1491px\" \/><figcaption class=\"wp-element-caption\">Identifying the CSS of my web font that needs the swap attribute &#8211; Source: <a href=\"https:\/\/wordpress.org\/plugins\/string-locator\/\">Stringlocator<\/a><br><\/figcaption><\/figure><p>Note: once you have identified the web fonts, you still need to manually add the :swap parameter to your web font.&nbsp;<\/p><h3 class=\"wp-block-heading\">4. Using Your WordPress Theme<\/h3><p>Some themes have filters that you can put in the Customizer to enable \u201cswap\u201d on their generated Google fonts. As an example, GeneratePress uses the following filters:&nbsp;&nbsp;<\/p><pre class=\"wp-block-code\"><code class=\"\">add_filter( 'generate_google_font_display', function() {\nreturn 'swap'; \n} );\n<\/code><\/pre><h2 class=\"wp-block-heading\">Wrapping Up<\/h2><p>Fixing the \u201censure text remains visible during webfont load\u201d warning on PageSpeed Insights can be fixed using the swap attribute font-display: swap;. The :swap parameter avoids the flashing invisible text (FOIT) issue and ensures that the text remains visible thanks to a temporary system font.&nbsp;<\/p><p>Preloading fonts and making sure that the text remains visible at all times is even easier to do with WP Rocket:<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"600\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/WP-Rocket-fixing-the-invisible-text-issue-on-WordPress-.png\" alt=\"WP Rocket fixing the invisible text issue on WordPress - Source: WP Rocket\n\" class=\"wp-image-4296580\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/WP-Rocket-fixing-the-invisible-text-issue-on-WordPress-.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/WP-Rocket-fixing-the-invisible-text-issue-on-WordPress--260x195.png 260w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/WP-Rocket-fixing-the-invisible-text-issue-on-WordPress--768x576.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/WP-Rocket-fixing-the-invisible-text-issue-on-WordPress--80x60.png 80w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/WP-Rocket-fixing-the-invisible-text-issue-on-WordPress--120x90.png 120w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">WP Rocket fixing the invisible text issue on WordPress &#8211; Source: <a href=\"https:\/\/wp-rocket.me\/\">WP Rocket<\/a><br><\/figcaption><\/figure><p>WP Rocket is one the easiest and most reliable ways to achieve font optimization, remove the invisible text issue, and fix the PageSpeed Insights audit.&nbsp;<\/p><p>Additionally, WP Rocket improves load time and perceived performance, resulting in a better user experience. This also leads to an <a href=\"https:\/\/wp-rocket.me\/lighthouse-performance-score-wordpress\/\">improvement of the PageSpeed Insights performance score<\/a>!<\/p><p>There is a money-back guarantee for 30 days, so you don\u2019t have any risks. Try <a href=\"https:\/\/wp-rocket.me\/features\/\">WP Rocket<\/a> today and run a PageSpeed Insights audit to see the improvements.&nbsp;<\/p>","protected":false},"excerpt":{"rendered":"<p>Wanting to know how to ensure text remains visible during webfont load, and fix the PageSpeed Insights warning on WordPress? You&#8217;re in the right place. Read the article and find out what you should do.<\/p>\n","protected":false},"template":"","core_web_vitals":[133],"class_list":["post-4296261","core_web_vitals_hub","type-core_web_vitals_hub","status-publish","hentry","core_web_vitals-improve-cumulative-layout-shift"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Ensure Text Remains Visible During Webfont Load<\/title>\n<meta name=\"description\" content=\"Wanting to know how to ensure text remains visible during webfont load, and fix the PageSpeed Insights warning? Read the article and find out!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/ensure-text-remains-visible-webfont-load\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Ensure Text Remains Visible During Webfont Load\" \/>\n<meta property=\"og:description\" content=\"Wanting to know how to ensure text remains visible during webfont load, and fix the PageSpeed Insights warning? Read the article and find out!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/ensure-text-remains-visible-webfont-load\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Rocket\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-13T15:44:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Ensure-text-remains-visible-during-webfont-load-warning.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@wp_rocket\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/ensure-text-remains-visible-webfont-load\/\",\"url\":\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/ensure-text-remains-visible-webfont-load\/\",\"name\":\"How to Ensure Text Remains Visible During Webfont Load\",\"isPartOf\":{\"@id\":\"https:\/\/wp-rocket.me\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/ensure-text-remains-visible-webfont-load\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/ensure-text-remains-visible-webfont-load\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Ensure-text-remains-visible-during-webfont-load-warning.png\",\"datePublished\":\"2022-04-21T14:22:57+00:00\",\"dateModified\":\"2023-09-13T15:44:52+00:00\",\"description\":\"Wanting to know how to ensure text remains visible during webfont load, and fix the PageSpeed Insights warning? Read the article and find out!\",\"breadcrumb\":{\"@id\":\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/ensure-text-remains-visible-webfont-load\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/ensure-text-remains-visible-webfont-load\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/ensure-text-remains-visible-webfont-load\/#primaryimage\",\"url\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Ensure-text-remains-visible-during-webfont-load-warning.png\",\"contentUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Ensure-text-remains-visible-during-webfont-load-warning.png\",\"width\":1999,\"height\":647},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/ensure-text-remains-visible-webfont-load\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wp-rocket.me\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Core Web Vitals\",\"item\":\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Cumulative Layout Shift\",\"item\":\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/improve-cumulative-layout-shift\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"How to Ensure Text Remains Visible During Webfont Load\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wp-rocket.me\/#website\",\"url\":\"https:\/\/wp-rocket.me\/\",\"name\":\"WP Rocket\",\"description\":\"Plugin d&#039;optimisation de sites WordPress\",\"publisher\":{\"@id\":\"https:\/\/wp-rocket.me\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wp-rocket.me\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/wp-rocket.me\/#organization\",\"name\":\"WP Rocket\",\"url\":\"https:\/\/wp-rocket.me\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wp-rocket.me\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/logo-wp-rocket-paypal-2.png\",\"contentUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/logo-wp-rocket-paypal-2.png\",\"width\":150,\"height\":41,\"caption\":\"WP Rocket\"},\"image\":{\"@id\":\"https:\/\/wp-rocket.me\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829\",\"https:\/\/x.com\/wp_rocket\",\"https:\/\/www.youtube.com\/channel\/UC1ozThXHd1IWIZ5wkshgp_Q\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Ensure Text Remains Visible During Webfont Load","description":"Wanting to know how to ensure text remains visible during webfont load, and fix the PageSpeed Insights warning? Read the article and find out!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/ensure-text-remains-visible-webfont-load\/","og_locale":"en_US","og_type":"article","og_title":"How to Ensure Text Remains Visible During Webfont Load","og_description":"Wanting to know how to ensure text remains visible during webfont load, and fix the PageSpeed Insights warning? Read the article and find out!","og_url":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/ensure-text-remains-visible-webfont-load\/","og_site_name":"WP Rocket","article_publisher":"https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829","article_modified_time":"2023-09-13T15:44:52+00:00","og_image":[{"url":"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Ensure-text-remains-visible-during-webfont-load-warning.png"}],"twitter_card":"summary_large_image","twitter_site":"@wp_rocket","twitter_misc":{"Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/ensure-text-remains-visible-webfont-load\/","url":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/ensure-text-remains-visible-webfont-load\/","name":"How to Ensure Text Remains Visible During Webfont Load","isPartOf":{"@id":"https:\/\/wp-rocket.me\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/ensure-text-remains-visible-webfont-load\/#primaryimage"},"image":{"@id":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/ensure-text-remains-visible-webfont-load\/#primaryimage"},"thumbnailUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Ensure-text-remains-visible-during-webfont-load-warning.png","datePublished":"2022-04-21T14:22:57+00:00","dateModified":"2023-09-13T15:44:52+00:00","description":"Wanting to know how to ensure text remains visible during webfont load, and fix the PageSpeed Insights warning? Read the article and find out!","breadcrumb":{"@id":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/ensure-text-remains-visible-webfont-load\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/ensure-text-remains-visible-webfont-load\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/ensure-text-remains-visible-webfont-load\/#primaryimage","url":"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Ensure-text-remains-visible-during-webfont-load-warning.png","contentUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/04\/Ensure-text-remains-visible-during-webfont-load-warning.png","width":1999,"height":647},{"@type":"BreadcrumbList","@id":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/ensure-text-remains-visible-webfont-load\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wp-rocket.me"},{"@type":"ListItem","position":2,"name":"Core Web Vitals","item":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/"},{"@type":"ListItem","position":3,"name":"Cumulative Layout Shift","item":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/improve-cumulative-layout-shift\/"},{"@type":"ListItem","position":4,"name":"How to Ensure Text Remains Visible During Webfont Load"}]},{"@type":"WebSite","@id":"https:\/\/wp-rocket.me\/#website","url":"https:\/\/wp-rocket.me\/","name":"WP Rocket","description":"Plugin d&#039;optimisation de sites WordPress","publisher":{"@id":"https:\/\/wp-rocket.me\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wp-rocket.me\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/wp-rocket.me\/#organization","name":"WP Rocket","url":"https:\/\/wp-rocket.me\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wp-rocket.me\/#\/schema\/logo\/image\/","url":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/logo-wp-rocket-paypal-2.png","contentUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/logo-wp-rocket-paypal-2.png","width":150,"height":41,"caption":"WP Rocket"},"image":{"@id":"https:\/\/wp-rocket.me\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829","https:\/\/x.com\/wp_rocket","https:\/\/www.youtube.com\/channel\/UC1ozThXHd1IWIZ5wkshgp_Q"]}]}},"_links":{"self":[{"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/core_web_vitals_hub\/4296261"}],"collection":[{"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/core_web_vitals_hub"}],"about":[{"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/types\/core_web_vitals_hub"}],"wp:attachment":[{"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/media?parent=4296261"}],"wp:term":[{"taxonomy":"core_web_vitals","embeddable":true,"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/core_web_vitals?post=4296261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}