Skip to main content

Error: Ensure text remains visible during webfont load [Resolved]

 Hi Guys, If you are running or developing a website you may encounter this error on Google page speed or GtMetrix, We should consider the following approach to get rid of this error.

Suggestion 1:

Load the fonts from your server, Even if you are using google fonts you should download and host it on your server. 

Suggestion 2: 

Use the font-display: swap CSS property while implementing custom fonts, this means the system default fonts will be loaded first and then the custom font is visible, hence text will remain visible.


Labels:

Comments

Post a Comment

Popular posts from this blog

React: Remember me functionality with React

Want to know how can you easily integrate Remember me on your website just follow the steps below and I am sure you will find this pretty easy. There is no rocket science to crack it you just need basic code knowledge only. Step 1: Add the react-cookie in your project    npm install react-cookie Step2: Add the following code in index.js import { CookiesProvider } from "react-cookie"; ReactDOM.render(      <CookiesProvider>           <App />      </CookiesProvider>,      document.getElementById('root') ); Step3: Add the following code in your component    import React, { useState } from 'react'; import { useCookies } from 'react-cookie'; const App = () => { const [name, setName] = useState(''); const [pwd, setPwd] = useState(''); const [cookies, setCookie] = useCookies(['user']); const handle = () => {      setCooki...
Post a Comment
Read more

JS: Cheatsheet

   Datatypes Difference Between Var, Let and Const Functions and its types Asynchronous operations in JS
3 comments
Read more

React: Print Specific Section of the page with - ReactToPrint

  Want to know how can you easily print specific section of your website just follow the steps below and I am sure you will find this pretty easy. There is no rocket science to crack it you just need basic code knowledge only. Step 1: Add the ReactToPrint in your project    npm install --save react-to-print Step2: Add the following code in your component   import React, { useRef } from 'react'; import ReactToPrint from 'react-to-print'; const Example = () => {      const componentRef = useRef();      return (           <div>                <ReactToPrint                     trigger={() => <button>Print this out!</button>}                     content={() => componentRef}    ...
Post a Comment
Read more