Website Ensure Web-Font Load All Woff Error Fix Easy

How to Fix Website template web font load woff/woff2 error ?

When you're using a website template, you may encounter an error where the web fonts in the template fail to load and produce a 404 error for the woff or woff2 files. Here are some steps to fix this error:

1.       Make sure that the web font files are in the correct directory on your server. Check the file paths in your CSS file or HTML file to ensure that they are pointing to the correct directory. Double-check that the font files are uploaded to the correct location on your server.

2.       Verify that the file names and extensions are correct. The font file names and extensions should match what is specified in your CSS file or HTML file. If there is a mismatch, rename the files to match.

3.       Check the file permissions on your server. Make sure that the font files have the correct permissions and are readable by the web server. You may need to change the file permissions to allow access.

4.       Check that your server is configured to serve .woff and .woff2 files with the correct MIME types. Add the following lines to your .htaccess file to ensure that the correct MIME types are set:

AddType application/font-woff2 .woff2

AddType application/font-woff .woff

1.               5.     Use a web font hosting service such as Google Fonts, Adobe Fonts, or Typekit. These services provide a simple way to add web fonts to your website, and they take care of all the technical details such as file formats, file compression, and hosting.

Best and easy way to remove gstatic font.Woff error from blog/website


Here is font Example: Just Edit as direction use them.Customize this font css as your Font.Woff error link. 
Change Red Coloured word only. Without edit font code will not work for you. It's easy way to fix wolf error.

Font Name:
Version: v9 or v12 or, v18 (Example)
Font ID: KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2 (Example)
ID version: woff or, woff2

Solve:

And use Href tag on <head> if not present on your site:

Part:1 

<link href='https://fonts.gstatic.com' rel='stylesheet'>
<link href="https://fonts.googleapis.com/css/min.css/css2?family=Dosis,opensans,font-awesome,roboto,Exo,Exo+2:wght@400;500;600;700" display="swap" rel="stylesheet" type="text/css">


Part:2
@font-face {
font-family: 'roboto';
font-style: normal;
font-weight: 400;
src: local('roboto Regular'), local('roboto-Regular'),
url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
font-display: swap;
font-display: fallback;
}


Or Use 

Preload web fonts Use to fetch your font files earlier:

<link rel="preload" as="font">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700&gt;display=swap' rel='stylesheet'>

CSS:
@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'),
    url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
      format('woff2');
  font-display: swap;
}

Change CSS:

Use font-display #
Before
@font-face { font-family: Helvetica; }

After
@font-face { font-family: Helvetica; font-display: swap; }

Comments

Popular posts from this blog

Office Tool_SPSS v23 + Serial key

How to Fix FATAL error Failed to parse input Document ?

How to Reduce Lazy Load Resources

Popular posts from this blog

Office Tool_SPSS v23 + Serial key

How to Fix FATAL error Failed to parse input Document ?

How to Reduce Lazy Load Resources