CODEWITHSUNDEEP
htmlcssgoogle-chromefonts
Dariun
Dariun

Reputation: 347

Font-Face - the server responded with a status of 403 (Forbidden)

I want to load 6 fonts, so i download the fonts and implement them inside my css file.

@font-face {
    font-family: "TTNorms";
    src: local('TT Norms Pro Regular'), url("../fonts/Copytext/TT\ Norms\ Pro\ Regular.otf") format("opentype");
}

After loading the css in set the different fonts to different areas like this

<div class="col" style="font-family TTNorms !important"> some text </div>

If I open the website local everything works perfectly but if I upload to webspace I get error Messages:

Failed to load resource: the server responded with a status of 403 (Forbidden)

I dont understand why the fonts arent loading with error 403.. there are license free. Is there something missing?

Upvotes: 0

Views: 9116

Answers (2)

Carlos Trujillo
Carlos Trujillo

Reputation: 5

Figure it out, if you have problems loading fonts, material design icons and appear message of 403 forbidden. You need to go AWS S3 click in your bucket go to Permissions> Block Public Access Settings and turn them OFF.

Then go to the files that you have problems with in the bucket and in action make them public. That will solve the problem loading fonts, material design icons, etc.

Upvotes: -2

fraggley
fraggley

Reputation: 1275

You are receiving a 403 error because your server is saying you don't have permission to access those fonts. To access them:

  1. Clean up the path to your font files in the src: line of your CSS
  2. On your server, update the permissions of your font folder (and fonts) to 755

Upvotes: 4

Related Questions