1

Just tried to use a new font, put it in a folder and linked to it, but I am getting this:

GET http://localhost/mywebsite/fonts/garamond/EBGaramond12-Regular.ttf 403 (Forbidden)

I implemented it like so:

@font-face {
  font-family: Garamond;
  src: url(../fonts/garamond/EBGaramond12-Regular.ttf);
  text-rendering: optimizeLegibility;
}

The path is correct, but I'm not sure why I get a 403. I am using XXAMP on OSX, other fonts work fine.

George Welder
  • 3,379
  • 8
  • 36
  • 71

2 Answers2

2

GET http://localhost/mywebsite/fonts/garamond/EBGaramond12-Regular.ttf 403 (Forbidden)

Is a sign for a file permission problem. You can get the file permissions by ls -l in the terminal. Changing them by chmod to 777 should work. Later on you can change them back to a lower permission for security.

RacoonOnMoon
  • 1,494
  • 11
  • 27
-3

Try by removing the starting double dots and slash in the font path.

Like this:

@font-face {
  font-family: Garamond;
  src: url(fonts/garamond/EBGaramond12-Regular.ttf);
  text-rendering: optimizeLegibility;
}

The ../ needed only if your fonts directory is outside of the project directory or your styles file is located in a subdirectory instead of project root.

On other hands, it might be the mime types issue.

See this help for that: Why is @font-face throwing a 404 error on woff files?