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
I implemented a webfont on our website. The website is available through two domains:
http://blog.von-der-see.de / http://www.vds-blog.de
The webfont is implemented this way:
#font-face {
font-family: Quattrocento-Sans;
src: url('./style/Quattrocento Sans.woff');
}
#font-face {
font-family: Quattrocento-Sans-Bold;
src: url('./style/Quattrocento Sans Bold.woff');
}
If you view the website in firefox through both domains, you will see that the font is not working on one of two domains.
The website is a wordpress and if i switch the home-url to the other domain, its not working on the on, but then on the other domain.
Whats the problem?
Have you tried adding font mime types in your htaccess?
Just out of interest why are you only using woff? No true type etc?
http://www.vds-blog.de/ doesn't load webfonts.
By changing style.css url in theme's header page
from
<link href="http://blog.von-der-see.de/wp-content/themes/vondersee/style.css" rel="stylesheet">
to
<link rel="stylesheet" href="http://www.vds-blog.de//wp-content/themes/vondersee/style.css">
may solve your problem.
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!
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.
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.