themes - 404 Error while accessing the font files

admin管理员组

文章数量:1205733

Added a custom font as follows

1. Uploaded web-font files and given them the 777 permission

   /

2. Added rules to the css file

   @font-face { font-family: 'museo_sans700'; src: url('.eot'); src: url('.eot?#iefix') format('embedded-opentype'), url('.woff') format('woff'), url('.ttf') format('truetype'), url('.svg#museo_sans700') format('svg'); font-weight: normal; font-style: normal; }

However, while using/accessing the font family, it gives a 404 error

Attached snap

Any clue?? Why this is happening??

Added a custom font as follows

1. Uploaded web-font files and given them the 777 permission

   http://example.com/wp-content/themes/mytheme/css/fonts/

2. Added rules to the css file

   @font-face { font-family: 'museo_sans700'; src: url('http://example.com/wp-content/themes/mytheme/css/fonts/museosans_700-webfont.eot'); src: url('http://example.com/wp-content/themes/mytheme/css/fonts/museosans_700-webfont.eot?#iefix') format('embedded-opentype'), url('http://example.com/wp-content/themes/mytheme/css/fonts/museosans_700-webfont.woff') format('woff'), url('http://example.com/wp-content/themes/mytheme/css/fonts/museosans_700-webfont.ttf') format('truetype'), url('http://example.com/wp-content/themes/mytheme/css/fonts/museosans_700-webfont.svg#museo_sans700') format('svg'); font-weight: normal; font-style: normal; }

However, while using/accessing the font family, it gives a 404 error

Attached snap

Any clue?? Why this is happening??

• themes
• css
• 404-error

Share Improve this question asked Jun 1, 2015 at 12:50 echoashuechoashu 12511 gold badge11 silver badge1212 bronze badges 1

• Who owns the files? root or the user whose directory the files live in? – Howard E Commented Apr 29, 2016 at 16:04

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 2

Please use short path file url rather then absolute path.

So code is like:

@font-face{ /* for IE */
font-family:FontFamily;
src:url(Font.eot);
}
@font-face { /* for non-IE */
font-family:FontFamily;
src:url(http://) format("No-IE-404"),url(Font.ttf) format("truetype");
}

Make sure that readable web has released it’s first @font-face related software utility for creating natively compressed EOT files quickly and easily.

If this is not your solution then you need to check https://stackoverflow.com/questions/4015816/why-is-font-face-throwing-a-404-error-on-woff-files.

Seems like your server is not allowing to load woff and woff2 fonts.

Please check this documentation. It has server config to enable woff and woff in Azure. https://base16solutions.wordpress.com/2017/11/09/issue-of-fonts-not-loading-on-azure-sites/

404 stands for file are not available at the URL you are trying to access it. check your file path and files in your given directory.

also check permissions: permission for file:644 directory: 755

本文标签： themes404 Error while accessing the font files