0

I have been trying to get Firefox to load a custom font I have on a server that is not the one my Google App Engine project is in, I understand that this happens because my website and my font are not on the same server, and Firefox does not allow that.

I found on this question Access-Control-Allow-Origin header on Google App Engine how to allow different origins like you would on an htaccess file, but it seems to work only for files that you have on your server too. I am trying this

- url: /wp-content(.*\.(otf|eot|svg|ttf|woff))
  static_files: wordpress/wp-content/\1
  upload: wordpress/wp-content/(.*\.(otf|eot|svg|ttf|woff))
  http_headers:
    Access-Control-Allow-Origin: "*"

, and I downloaded my files, to see if it would work locally, and it doesn't. This is what I have, there is obviously something wrong with it, but I would really like to know how to add the handler here, so my font-face would still be loaded on another server and not with a remote link.

The font loads well on Chrome, Safari and Opera.

Community
  • 1
  • 1
8bitali
  • 1
  • I load a font from Google with no problems - never see this warning. How did you include this font in your page? – Andrei Volgin Feb 20 '14 at 01:35
  • First I did it like this: `@font-face { font-family: 'WebSymbolsLigaRegular'; src: url("https://cic.mx/src/fonts/websymbolsligaregular.eot"); src: url("https://cic.mx/src/fonts/webSymbolsLiga-Regular.eot?#iefix") format("embedded-opentype"), ...` – 8bitali Feb 20 '14 at 15:27
  • @AndreiVolgin Then I saved the font files on /wordpress/wp-content/themes/mytheme/fonts and the stylesheet is on wordpress/wp-content/themes/mytheme/style.css where I edited `font-family: 'WebSymbolsLigaRegular'; src: url('fonts/websymbolsligaregular.eot'); src: local('☺'), url('fonts/websymbolsligaregular.woff')...` – 8bitali Feb 20 '14 at 15:37

2 Answers2

0

Looks like you might be missing a "/" in your url regex, i.e.

- url: /wp-content/(.*\.(otf|eot|svg|ttf|woff))
Mars
  • 1,424
  • 8
  • 9
0

This is how I load a font. In my HTML page:

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600&subset=latin,cyrillic' rel='stylesheet' type='text/css'>

Then in my CSS:

body {
    font-family: 'Open Sans', Arial Unicode MS,Arial,sans-serif;
}
Andrei Volgin
  • 38,656
  • 5
  • 43
  • 55
  • Thanks, the font is not from Google, is a custom font I downloaded, but I am using Google App Engine for my hosting. I actually use the Open Sans font as well, and that one works fine, but I don't think or I don't know if there's a way I can load my font as a stylesheet. – 8bitali Feb 20 '14 at 16:04
  • Replace the URL with the link to your font. I am using it on App Engine too. – Andrei Volgin Feb 20 '14 at 16:06
  • Still nothing on Firefox... :C – 8bitali Feb 20 '14 at 18:33