I'm having trouble getting a custom, non-websafe font to work in Firefox. I have it working in Chrome, Opera and Safari using the following code:
#import url(http://fonts.googleapis.com/css?family=Antic+Slab);
#font-face {
font-family: 'BadgerFont';
src: url('http://www.vectorthatfox.co.uk/badgerandkingdom/fonts/oratorstd-webfont.eot');
src: url('http://www.vectorthatfox.co.uk/badgerandkingdom/fonts/oratorstd-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.vectorthatfox.co.uk/badgerandkingdom/fonts/oratorstd-webfont.woff') format('woff'),
url('http://www.vectorthatfox.co.uk/badgerandkingdom/fonts/oratorstd-webfont.ttf') format('truetype'),
url('http://www.vectorthatfox.co.uk/badgerandkingdom/fonts/oratorstd-webfont.svg#orator_stdregular') format('svg');
font-weight: normal;
font-style: normal;
}
body{
font-family: BadgerFont, 'Antic Slab', Serif;
letter-spacing: 1px;
}
What am i missing here?
Heres a link to the site incase you want to see for yourself.
By default, Firefox will only accept relative links. Firefox (which supports #font-face from v3.5) does not allow cross-domain fonts by default. This means the font must be served up from the same domain (and sub-domain) unless you can add an “Access-Control-Allow-Origin” header to the font.
Or, just load the font some other way (locally or with a CDN)
https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS#Access-Control-Allow-Origin
You should learn to use your developer tools in Firefox. Fifth console message is this:
[08:28:41.886] Unrecognized at-rule or error parsing at-rule '#import'. # http://cdn.bigcartel.com/theme_stylesheets/19013562/2771282761/theme.css:474
From MDN:
The #import CSS at-rule allows to import style rules from other style
sheets. These rules must precede all other types of rules, except
#charset rules; as it is not a nested statement, it cannot be used
inside conditional group at-rules.
EDIT
Please look in your console, it gives you all the answers
[11:00:17.697] downloadable font: download failed (font-family: "BadgerFont" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed
source: http://www.vectorthatfox.co.uk/badgerandkingdom/fonts/oratorstd-webfont.woff # http://cdn.bigcartel.com/theme_stylesheets/19013568/2771283940/theme.css
As the message says, Firefox will not allow you to embed cross-domain fonts. If you want to use that font, then download them from that website, if you are allowed, and upload them to your own domain and link to them yourself.
Related
Using Grails version 2.4.4. and trying to load CSS resource from URL
http://myAppName.com:7777/myApp/assets/style.css
/myApp/assets/style.css
I've set in style.css:
#font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?t0751g');
src: url('../fonts/icomoon.eot?t0751g#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?t0751g') format('truetype'),
url('../fonts/icomoon.woff?t0751g') format('woff'),
url('../fonts/icomoon.svg?t0751g#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
Beside this, I added few other options for proper icon load.
Assets structure:
/assets/fonts/icomoon.ttf (and all other icomoon files are here)
/assets/stylesheets/style.css
when I use 2. url it loads my custom icons normally but when I set the 1. url in <style> as shown above, icon loading fails.
Both url-s should point to the same file and I don't understand why this is not working. Anyone knows what I am doing wrong ?
Any help will be appreciated!
So I found out that fonts does not support cross-origin domain, and I used icomoon icons as font to import it from another domain. On the other hand, i found out you can use Fontello which generates embedded JS and automatically fixes this issues, so it is generally better to use.
I'm trying to get my icons to work locally on my machine without the use of a server and I'm getting the following for one out of three files giving this kind of error in the console of Firefox only (it works on all of the other browsers).
downloadable font: download failed (font-family: "FontAwesome"
style:normal weight:normal stretch:normal src index:1): bad URI or
cross-site access not allowed source:
file:///C:/Users/jester/Documents/Projects/assets/fonts/fontawesome-webfont.woff2?v=4.7.0
Here is what I have in my index.html file to call the css:
<link rel="stylesheet" href="../assets/css/font-awesome.min.css" type="text/css">
And this is what exists in the css file for the appropriate error from the console:
#font-face{
font-family:'FontAwesome';
src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');
src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight:normal;
font-style:normal
}
I'm going to state the obvious things I've tried with some of them being ridiculous, but thought I should try every thing I read about this. I tried using double quotes instead of single quotes, removing the query string after the .woff2 file, and even added a semicolon to the end of the font-style. I'm not sure exactly what needs to be done, but almost everyone who had an issue locally was able to add something onto their Apache servers. I don't have that, so what's the problem here?
The website is here:
http://rjdlee.com/projects/mobile/index.html
Even in my local copy, I was experiencing some issues where the font wouldn't refresh after changing it. I've checked the url it is attempting to read for the font and it appears to be right. Is there something wrong?
Here is the code:
#font-face {
font-family: 'icons';
font-weight: normal;
font-style: normal;
src:url('../fonts/icons.eot?-gbp2x2');
src:url('../fonts/icons.eot?#iefix-gbp2x2') format('embedded-opentype'),
url('../fonts/icons.ttf?-gbp2x2') format('truetype'),
url('../fonts/icons.woff?-gbp2x2') format('woff'),
url('../fonts/icons.svg?-gbp2x2#icons') format('svg');
}
Here is the error:
[16:21:58.083] downloadable font: download failed (font-family: "icons" style:normal weight:normal stretch:normal src index:1): status=2147746065
source: http://rileedesign.com/projects/mobile/fonts/icons.ttf?-gbp2x2 # http://rileedesign.com/projects/mobile/css/main.css
Do you have access to your .htaccess file? This can happen if certain file types are forbidden/excluded. I had the issue before and it was fixed by adding the font types as allowed, e.g.:
<FilesMatch ".*\.(js|JS|css|CSS|jpg|JPG|gif|GIF|png|PNG|swf|SWF|xsl|XSL|svg|eot|ttf|woff)$">
Order Allow,Deny
Allow from all
</FilesMatch>
Turns out the issue was with my hosting provider.
This is quite confusing to me. I am using font-squirrel to download a web kit to show a custom font. here is the link to font: http://www.fontsquirrel.com/fontfacedemo/League-Gothic
If you look at the homepage right now: http://www.simonsayswebsites.com/
the main text in the middle says "Custom Built Websites Designed To Get You More customers". It looks great in chrome, exactly as it should, but if you look at it in either firefox or IE, the custom font face does not work.
Here's the CSS generating the font-face:
#font-face {
font-family: 'LeagueGothicRegular';
src: url('http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.eot');
src: url('http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
url('http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.woff') format('woff'),
url('http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.ttf') format('truetype'),
url('http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Anyone have any ideas? I looked at many cases on this all ready, but I don't see one that relates to my case as I thought I have included all the different necessary files for each browser and have them uploaded to their respected places.
Poking around I found this interesting tidbit for Firefox:
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.
Try changing those font URLs to relative and see if that helps:
#font-face {
font-family: 'LeagueGothicRegular';
src: url('/wp-content/themes/twentytenchild/League_Gothic-webfont.eot');
src: url('/wp-content/themes/twentytenchild/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
url('/wp-content/themes/twentytenchild/League_Gothic-webfont.woff') format('woff'),
url('/wp-content/themes/twentytenchild/League_Gothic-webfont.ttf') format('truetype'),
url('/wp-content/themes/twentytenchild/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
font-weight: normal;
font-style: normal;
}
edit: see Korpela's answer; the problem was the mismatch from the 'www' subdomain. You should probably keep the URLs relative, though.
The reason for the problem is (was) the use of a font across domains. A URL that starts “http://simonsayswebsites.com” is treated as being in a different domain than “http://www.simonsayswebsites.com” even though the two domain names may refer to the same computer.
Switching to a relative URL helped because then the domain is the same. But despite rumors to the contrary, Firefox does not reject absolute URLs in #font-face. I have set up a trivial demo to show this.
Presumably, the rumors have originated from cases like this: if switching to a relative URL helps, it is natural to assume that the type of URL was the issue.
I had your problem too and searched a lot about it but came up with nothing...
so i started experimenting on my CSS for some minutes and finally realized that i had duplicated font family names, I had been declaring below code in both my theme and layout page:
<style type="text/css" media="screen, print">
#font-face
{
font-family: 'foo';
src: url('~/Assets/fonts/foo.woff') format('woff'),
url('~/Assets/fonts/foo.ttf') format('truetype'),
url('~/Assets/fonts/foo.eot') format('eot');
}
</style>
I just needed to remove one of them and my code worked fine in all three browsers!
one more point is that just removing the line containing "font-family: 'foo';" parts will do the trick!
I've built a custom wordpress theme that uses font-face for typography. All works fine when running in localhost, but after uploading the theme to a live site, font-face fails in FF. Still works fine in IE9
I've tried hardcoding the CSS link in header.php, moving the font files out of the theme to the site root, using a separate stylesheet for the #font-face declaration, but nothing wants to work.
Any ideas?
Cheers
Nathan
Did you include all the font files necessary? Different browsers support different types. For example, here's one I used on a site recently:
font-face {
font-family: 'GentiumBookBasicRegular';
src: url('_/fonts/GenBkBasR-webfont.eot');
src: url('_/fonts/GenBkBasR-webfont.eot?#iefix') format('embedded-opentype'),
url('_/fonts/GenBkBasR-webfont.woff') format('woff'),
url('_/fonts/GenBkBasR-webfont.ttf') format('truetype'),
url('_/fonts/GenBkBasR-webfont.svg#GentiumBookBasicRegular') format('svg');
font-weight: normal;
font-style: normal;
}
A fantastic resource for this is http://fontsquirrel.com - they'll even let you upload fonts that they don't have and they'll create the package and the css for you.