Running a site on the CargoCollective platform.
Specifying #font-face as follows:
#font-face { font-family: 'Meta';
src: url('https://www.sugarsync.com/pf/D7160824_3237110_68577?directDownload=true') format('embedded-opentype'),
url('https://www.sugarsync.com/pf/D7160824_3237110_68571?directDownload=true') format('truetype'),
url('https://www.sugarsync.com/pf/D7160824_3237110_68573?directDownload=true') format('woff'),
url('https://www.sugarsync.com/pf/D7160824_3237110_68579?directDownload=true#Meta') format('svg');
font-weight: normal;
text-shadow: 0 1px 0 rgba(255,255,255,0.01);
}
Works in Chrome and Safari, but not in Firefox. Should work in IE since it's got EOT at the top and the URL contains a '?' making IE think the alternates are a query string, though I have no way of testing this as I am on mac.
Problem is that in Firefox (10.0.2, Mac), the font being requested seems to need authorisation to download the font, so it never does download it, and I'm presented with the default serif, which alters the appearance dramatically.
Styling is declared also in the CSS, as usual, with correct hierarchy structure, for example:
body {
font-family: Meta, Helvetica, Arial, sans-serif;
}
Not sure why this isn't working, frankly. I've heard it said that Firefox usually downloads the last font in the list, which I have as the SVG as a reading-order 'last resort' filetype, and the font name specified using #Fontname at the end of the URL. Could this be the problem? Can I elect not to specify the SVG Font Name, if this is the case?
I also have this not working in Firefox on another of my websites also hosted on Cargo.
Situation there differs a little, and seems to rule out the obvious issues with this one:
There, the code uses the old 'bulletproof' method:
#font-face { font-family: 'Egyptienne';
src url('http://dl.dropbox.com/u/34000443/My%20Site%20Fonts/Egyptienne/Web/Egyptienne/egyptiennef-roman-webfont.eot') format('embedded-opentype');
src: local('☺'),
url('http://dl.dropbox.com/u/34000443/My%20Site%20Fonts/Egyptienne/Web/Egyptienne/egyptiennef-roman-webfont.ttf') format('truetype'),
url('http://dl.dropbox.com/u/34000443/My%20Site%20Fonts/Egyptienne/Web/Egyptienne/egyptiennef-roman-webfont.woff') format('woff'),
url('http://dl.dropbox.com/u/34000443/My%20Site%20Fonts/Egyptienne/Web/Egyptienne/egyptiennef-roman-webfont.svg') format('svg');
font-weight: normal;
text-shadow: 0 1px 0 rgba(255,255,255,0.01);
}
But again, the font never loads, and I'm left with ol' Mr. Default.
Differences that I thought may be the issue in the other situation but which seem to be ruled out by this one:
HTTP vs HTTPS (I initially thought it was an issue with being behind the S of HTTPS)
SVG Name is never specified, and there's not even a query string to confuse it
[Also, probably irrelevant but before someone asks, the text-shadow property is to minutely improve text rendering in windows.]
Finally, I assume the problem is with Access Control Headers, but how does one append these to font-face code, since there is no .htaccess available to edit?
Thanks in advance!
Firefox does not allow you to load font resources from a different domain. You would have to explicitly allow this via an .htaccess file on the dropbox.com server.
Here's a snippet:
<FilesMatch "\.(ttf|otf|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Or even better, since the above code will allow anyone to leach:
<FilesMatch "\.(eot|otf|woff|ttf)$">
SetEnvIf Origin »
"^http(s)?://(.+\.)?(domain1\.org|domain\.com)$" origin_is=$0
Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is
</FilesMatch>
More information can be found here: http://www.fontsquirrel.com/blog/2010/11/troubleshooting-font-face-problems
we had the same problem. This was bad permission configuration of the application. More specific with de /fonts/ folder. The application was restricting the access to the resources of the /fonts/ folder. So force the browser to download the fonts... sorry about my english.
Related
I'm trying to use #font-face to load two fonts, but am running into all kinds of strange issues. Some browsers will load the fonts, others won't. Same browser on desktop won't load but will on mobile. I don't know if there's something wrong with my code or my file structure or what (I used fontsquirrel's generator for the sdregular font, but not the other one).
My #font-face code is:
#font-face {
font-family: 'sdregular';
src: url('sd-regular-webfont.woff') format('woff');
}
#font-face {
font-family: 'BoereTudor';
src: url('BOERT___0.ttf') format('truetype');
}
My css styling code is:
.c9 {font-family: 'sdregular';}
.c7 {font-family: 'BoereTudor'; font-size: 1.5em;}
Here's the page link: https://universaltheosophy.com/hpb/voiceofthesilence.html
My stylesheets and fonts are located in the folder https://universaltheosophy.com/resources/
The css file utfonts.css calls the fonts using #font-face.
The css file utstyle.css contains the font-family setting for the two classes (.c7 and .c9)
.c7 is used for the text "Dedicated to the Few"; and .c9 is used for a symbol located here: https://universaltheosophy.com/hpb/voiceofthesilence.html#sdfootnote41sym
I've tried testing in Firefox (desktop and mobile), Chrome (desktop and mobile), and DuckDuckGo's Mobile Browser, with completely inconsistent results.
Any help would be much appreciated!
Ok, found the solution, which had nothing to do with my code. My site is a wordpress site, but I'm adding these few html files separate from wordpress. The attempt to load font files from these html files resulted in a "Access-Control-Allow-Origin (CORS origin)" error. The solution is adding this little snipped of code to the wordpress .htaccess file:
<IfModule mod_headers.c>
<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
Solution came from here: https://crunchify.com/how-to-fix-access-control-allow-origin-issue-for-your-https-enabled-wordpress-site-and-maxcdn/
Related question here.
Boris' answer to the above question seems to make sense, but I installed the Font Awesome files on my server and the problem remains:
I looked into the library and found that the font files are included in the install, so the argument about cross-server access to fonts doesn't seem valid. I don't mind using the BootstrapCDN, but then Boris' suggestion seems to apply, and I don't know how to send the right CORS headers. (I tried it, but it doesn't work either.) Any idea how I can fix this, either using the "Bootstrap CDN" or the "default CSS"? (see also these instructions.)
PS: IE10 shows the glyph correctly.
Did you try Bootstrap CDN?
Just include <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> in your <head> section. Font files will be loaded automatically from CDN, too.
Checked this on Firefox and it works perfectly.
#Boris says:
Firefox only allows cross-domain linking of fonts if the server the font is on sends the right CORS headers.
So it's clear that it's CDNs duty to set the right headers, not yours. And them seem to do that correctly, because Firefox doesn't complain.
If you host fonts on your own server, keep in mind that cross-domain rule may still apply, e.g. font files places under example.com may be unaccessible from www.example.com, if www.example.com doesn't send the right headers.
Read this answer for tips about bypassing cross-sub-domain restrictions - this might help in your case.
Put in a custom CSS the following (for me it solved the problem):
#font-face
{
font-family:'FontAwesome';
src:url('./fontawesome-webfont.eot');
src:url('./fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('./fontawesome-webfont.woff') format('woff'),
url('./fontawesome-webfont.ttf') format('truetype'),
url('./fontawesome-webfont.svg#FontAwesome') format('svg');
font-weight:normal;
font-style:normal
}
[class^="icon-"]:before,
[class*=" icon-"]:before
{
font-family:FontAwesome;
font-weight:normal;
font-style:normal;
display:inline-block;
text-decoration:inherit
}
I am having same issue, we use the fonts on router board using micro httpd.
i added Access-Control-Allow-Origin: * header but not working for me.
i found in firebug that the woff file is not returing anything in response text. the same thing if i use CDN url, everything works fine. so on local micro-httpd server need some mandatory header to configure. please tell me also the exact mime types for all fonts needed.
.ttf", "application/x-font-ttf"
.eot", "application/vnd.ms-fontobject"
.woff", "application/font-woff"
.svg", "image/svg+xml"
solution to make the fontawesome css work locally is to include the files under Fonts folder into the same directory of .html files(pages).
eg:File structure as of now where fontawesome is not working
prototype\pages\.html files
prototype\styles\font-awesome\css\font-awesome.min.css
prototype\styles\font-awesome\css\fonts\fontawesome-webfont.eot,fontawesome-webfont.woff
The issue here is that for a page loaded from a file:// URI, only files in (or below) the same directory of the filesystem are considered to be "same origin", and so putting the font in a different subtree (../font/) means it will be blocked by security policy restrictions.As Firefox disables cross-domain fonts "by default.
Instead change the file structure as below:
prototype\pages\.html files
prototype\styles\font-awesome\css\font-awesome.min.css
prototype\pages\fonts\fontawesome-webfont.eot,fontawesome-webfont.woff
place the fonts folder under pages directory which fixes the issue.Hope it helps.
some-class-name:before
{
content: attr(\f021);
}
worked for me
If you are the owner of your own server, you can add a HTTP header to deal with that problem. Problem based on cross domain policies.
example.com/font-awesome.woff
boo.example/index.htm
in that case you should add that header to example.com
Access-Control-Allow-Origin = "http://boo.example"
or
Access-Control-Allow-Origin = "*"
that will make your font file reachable from other sites or specific site.
Be sure your paths are correct. Use the fa class and the icon class like:
fa fa-envelope
and will work great..
Greetings.
We just started using Amazon Cloudfront's CDN to load our files and we are having trouble getting the #font-face fonts to load in Firefox. Per some recommendations, we added the following code to our htaccess file, but it doesn't seem to solve the problem.
<FilesMatch "\.(ttf|ttc|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
The fonts do show up sometimes, but we still see errors in the console for each font. You can check it out at http://wiredimpact.com.
Also, the main WordPress post I used to learn about this is http://wordpress.org/support/topic/plugin-w3-total-cache-font-face-not-working-in-firefox?replies=21.
Any suggestions on how to get the fonts to load in Firefox correctly?
Thanks.
Edit:
I adjusted the code used in htaccess to:
<FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*.wiredimpact.com"
</IfModule>
</FilesMatch>
This not only adds the font.css file, which seems to help in Firefox, but it also only loads from our subdomains, which is better for security purposes. The fonts seem to be loading now in Firefox, but the errors are still showing up in the console.
As stated in icoMoon fonts doesn't show-up on Firefox by #meaganoff:
I was having issues with icomoon and Firefox as well. Have you tried
Paul Irish's 'bulletproof' #font-face syntax? It's a little
different than what icomoon outputs and I've had better luck with it -
no FF issues since.
#font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf')
format('truetype');
}
And worked like a charm!
any ideas? here's what I'm using:
#font-face {
font-family: 'Jott';
src: url(http://stuff.saikonet.org/fonts/jott/JottFLF-Bold.ttf) format('truetype');
}
Same-origin rule: By default, Firefox will only accept relative links. If you want to use absolute links or include fonts from different domains, you need to send these fonts with Access Control Headers. See: http://webfonts.info/wiki/index.php?title=%40font-face_support_in_Firefox
Can that be your problem:
In Gecko, web fonts are subject to the same domain restriction (font files must be on the same domain as the page using them), unless HTTP access controls are used to relax this restriction.
https://developer.mozilla.org/en/css/#font-face
When I downloaded the TTF it was working in Firefox as well.
I'm trying to create an offline HTML5 test application, and am playing with the new google fonts api at the same time. Does anyone have any ideas how to cache the remote fonts? Simply putting the api call in the cache manifest doesn't work, I assume this is because the api actually loads other files (ttf, eot, etc).
Any ideas if using the font api offline would be possible?
For reference this is the call I am making:
http://fonts.googleapis.com/css?family=IM+Fell+English|Molengo|Reenie+Beanie
If you paste that URL into the browser address bar you'll see the files the CSS links to:
http://themes.googleusercontent.com/font?kit=txVk61PTIsDrQQj2fK-76Q
http://themes.googleusercontent.com/font?kit=ljpKc6CdXusL1cnGUSamX_cCQibwlboQP4eCflnqtq0
http://themes.googleusercontent.com/font?kit=xwIisCqGFi8pff-oa9uSVOj-KzHqS7w8OFmqoAXdQwE
Robertc's approach is the solution...
I.e., Paste the google-provided link into your browser, and then add any files that are referenced into your manifest.
In my case I referenced
<link href='http://fonts.googleapis.com/css?family=Patua+One' rel='stylesheet' type='text/css'>
which just consists of the following style definition
#font-face {
font-family: 'Patua One';
font-style: normal;
font-weight: 400;
src: local('Patua One'), local('PatuaOne-Regular'), url('http://themes.googleusercontent.com/static/fonts/patuaone/v3/yAXhog6uK3bd3OwBILv_SD8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}
So to get the font to work when cached (off-line or not), you have to add the URL referenced in the 'src' to your manifest.