This is a dumb problem to have, I'm assuming there's a simple fix. I'm using a web font in a Wordpress theme - the site I'm working on has two domains that can be used to access the same site.
In my CSS I have used the font-squirrel format to declare the fonts:
#font-face {
font-family: 'Oswald';
src: url('oswald-regular-webfont.eot');
src: url('oswald-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('oswald-regular-webfont.woff') format('woff'),
url('oswald-regular-webfont.ttf') format('truetype'),
url('oswald-regular-webfont.svg#Oswald') format('svg');
font-weight: normal;
font-style: normal;
}
This works fine when I go to one of the domains, but when I go to the site via the other domain the font fails to load because it's considered to be a "cross-site" request. Basically when I go to domain1.com the request looks like this:
http://www.domain1.com/fonts/oswald-regular-webfont.ttf
But when I go to domain2.com the request STILL looks like that. Why? Since I'm using relative paths, shouldn't domain2.com be requesting:
http://www.domain2.com/fonts/oswald-regular-webfont.ttf
Anyone know what I've screwed up here? Is Wordpress injecting full paths into the CSS somehow?
Note: It works in Chrome, but not in Firefox or IE10. Chrome has the same strange URL behaviour, the difference is just that Chrome allows the cross-site request.
This is likely happening because you are using get_stylesheet_directory_uri() or similar to get the path to the CSS file and then using that in a wp_enqueue_style() call.
When this renders to the browser the page will have a full path to the file in it, not a relative one, which means that the font files are relative to another site, and thus it is cross site.
Related
I found a service that allow me to download web fonts:
https://www.fontsquirrel.com/fonts/daniel
I am not a web developer but I am helping to someone to figure out what went wrong.
Here is a web site that uses custom fonts: http://senschild.com
I've implemented:
#font-face{
font-family: 'Daniel-Regular';
src: url('../fonts/daniel_regular_macroman/Daniel-Regular-webfont.eot');
src: url('../fonts/daniel_regular_macroman/Daniel-Regular-webfont.eot?iefix') format('eot'),
url('../fonts/daniel_regular_macroman/Daniel-Regular-webfont.woff') format('woff'),
url('../fonts/daniel_regular_macroman/Daniel-Regular-webfont.ttf') format('truetype'),
url('../fonts/daniel_regular_macroman/Daniel-Regular-webfont.svg#webfont') format('svg');
}
but it does not work for me. The font is still system on the page.
What I did as well:
I also fixed this one as you said and fixed this part '../ as we don't need to move up as Maneesh said. Also I've edited css by removing font-family:JakobCTT; from body, but still does not work. I even added english words assuming that the font only for english characters.
The font files you are using appear to be corrupt, as Failed to decode downloaded font indicates. I've had this problem many times before when using the webfont generator on https://www.fontsquirrel.com.
Edit:
If you download the .OTF file and generate the webfont with https://www.web-font-generator.com/ it appears to work just fine.
Here is your fix:
Add style to the html elements you want to apply the font for. If you want the font to be applied for the whole webpage, then add the following style for body tag either in html or css.
font-family: 'Daniel-Regular';
Try this:
url('../fonts/daniel_regular_macroman/Daniel-Regular-webfont.eot?#iefix')
instead of
url('../fonts/daniel_regular_macroman/Daniel-Regular-webfont.eot?iefix')
There should be a ?#iefix not just a ?iefix
Sorry for the long post, but you need some background info before my question since this is a strange setup and it's quite complex.
I have two fonts that's needs to be in a newletter.
First font, Cyclone, is in a format OTF.
The second, Albert, is format EOT and WOFF.
We have a system that send the newsletters for us, i only need to upload a html file to that system, that contains the structure, images and newsletter content, and upload images that needs to be in the newsletter.
After that i can preview it by sending it to my self.
First, i can't upload fonts or anything else to the newsletter
system besides images and html.
Second, i have uploaded both fonts, and the css to our webiste's media
folder(public folder) where we also load images to the website.
Third, i or anyone else, have no access to the .htaccess file, and we
will never get it, since the site is hosted somewhere, and to get
that fixed for cross-domain for newsletters is to big of a task for
such a small job.
In the newsletter i am loading the font like this:
#import url(xxx.com/media/fonts/albert.css);
and the CSS looks like this:
#font-face {
font-family: Albert;
src: url("fsalbertwebregular.woff") format("woff");
}
have also tried this setup in the css:
#font-face {
font-family: 'Albert';
src: url('FSAlbertWeb-Regular.eot'); /* IE9 */
src: url('FSAlbertWeb-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('FSAlbertWeb-Regular.woff') format('woff'); /* Modern Browsers */
font-weight: normal;
font-style: normal;
}
And then use the font on the body:
body{
font-family: 'Albert', times new roman;
}
But doing this, i am getting this error/warning:
CORS-headeren 'Access-Control-Allow-Origin'
The funny thing is, when i used the Cyclone.otf font, it worked fine.
When i use the albert.eot or albert.woff, it's not working.
I then tried to convert the woff to otf, and use that, didn't work - same error/warning.
The setup might sounds strange, and is sure is, i have tried to draw how the setup is, so hope it makes a bit more sense.
Can anyone help me with this, what needs to be done without editing the .htaccess file. And why does Cyclone.otf work and not the others, even after converting them to otf?
Special fonts wont work in emails. You have to still use the basic web fonts like arial.
If it worked for you on one machine it may mean that you have that font installed. Try testing it on another machine and see what results you get. Also it can be worth testing your email code through a system like email on acid to see how it reacts and breaks to different email systems such as gmail or outlook.
Here is a guide to email fonts: http://templates.mailchimp.com/design/typography/
I have a jsfiddle set up with just a basic #font-face css and an h2. The font files that the css is referencing are all on the server, however if you enter the url for the woff file it says its not found. I have triple checked that the file exists exactly where it is pointing but I guess you just can't see woff files by entering them into url bars (edit: same for the svg).
So, why is the font in this jsfiddle not in open sans?
http://jsfiddle.net/rw2sbq8y/1/
html
<h2>Search for inventions</h2>
css
h2 {
font-family:'open sans-test';
font-size:24px;
font-weight:normal;
}
#font-face {
font-family: 'open sans-test';
src: url('http://www.drtvproductsummit.com/fonts/opensans-regular-webfont.eot');
src: url('http://www.drtvproductsummit.com/fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.drtvproductsummit.com/fonts/opensans-regular-webfont.woff') format('woff'),
url('http://www.drtvproductsummit.com/fonts/opensans-regular-webfont.ttf') format('truetype'),
url('http://www.drtvproductsummit.com/fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
(I am having an issue with fonts on the website I'm currently working on and I think this bit right here is the first step to fixing it)
Is the server hosting the fonts your server, or a 3rd party server like a CDN?
If it's yours, a common problem that I have encountered in the past is that the server doesn't know how to serve the font to you.
Fixing this is normally a simple matter of adding the MIME type for each font format type inc. EOT, WOF etc. To the server.
You should do a Google search on how to do this for your server type (eg if it's IIS, or Apache or something else).
Eg "how to add mime type to IIS".
You can also find the correct MIME type for each font format by doing a search. The results come up pretty easy to find, but here is a big list of valid MIME types (just find the ones you need from the list): http://www.freeformatter.com/mime-types-list.html
For purposes of SEO, I recently moved my css and img directories from www.findgamers.us to static.findgamers.us and the Entypo fonts won't load in IE or Firefox. Ironically they are showing up in Chrome.
All of my other styles and images seem to be working perfectly. And I'm still mystified why it works fine in Chrome but not the other two browsers.
As I understand it, urls in style sheets are relative to the location of the style sheet. The Entypo directory does sit in the css directory where the style sheets are located.
Here is whats in the style sheet where it loads the font.
#font-face {
font-family: 'EntypoRegular';
src: url('Entypo/entypo-webfont.eot');
src: url('Entypo/entypo-webfont.eot?#iefix') format('embedded-opentype'),
url('Entypo/entypo-webfont.woff') format('woff'),
url('Entypo/entypo-webfont.ttf') format('truetype'),
url('Entypo/entypo-webfont.svg#EntypoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
I've tried adding the full url to the url like so http://static.findgamers.us/css but it doesn't seem to work, nor do any of the other path options I've tried.
Suggestions?
IE and Firefox don't allow cross-domain by default. Only Chrome does.
So you have to specify the url in the style sheets, then allow cross domain in htaccess or in the php header settings. For instance, this is what you'll have to do in htaccess.
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin: "*"
</IfModule>
</FilesMatch>
Probably not the answer you want to hear - but move them back to the old configuration if it worked?
As an SEO (with a lot of website load speed experience) I can tell you two things:
1) It will not help SEO to have your CSS on the subdomain.
2) It is a bit of a myth that moving content to a 'cookieless' subdomain will improve load speed. More often than not it actually slows it down. This is both from experience, and from reference.
What I can 100% confirm will help, is minified CSS, correct expire/caching rules, and GZIP.
Hope this helps!
Colin
I have been trying to get the ttf files rendered in Chrome and Firefox but it just doesn't seem to work. While rendering the .woff file is working fine.
I downloaded the collection from http://www.google.com/webfonts#UsePlace:use/Collection:Philosopher and then renamed the Philosopher-Regular.ttf to fancyfont.ttf and then tried:
#font-face {
font-family: 'Fancyfont';
src: url('fonts/fancyfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
But the font just doesnt seem to add on to the webpage. However if i rename the woff file to fancyfont.woff and try :
#font-face {
font-family: 'Fancyfont';
src: url('fonts/fancyfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
then it all works fine for Chrome and Firefox.
Any solutions to this problem as i have seen the ttf files being rendered onto the browser?
Do not download a TTF from the Google Font API website. It is not intended for you to download the fonts. Instead, you link to a stylesheet which contains #font-face definitions for the font(s) you want to use.
<link href='http://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'>
(Do not include multiple <link>s if you want several fonts; instead, use the tool to add all the fonts you want in your page to a collection, and it will generate the appropriate <link> tag.)
Letting Google host the fonts is just like using a well-known CDN for jQuery: there's a good chance that a significant portion of your users will already have the font cached before they even come to your site (by virtue of the fact that they may have browsed other sites that used the same font).
Note that the CSS you link to from the API is actually generated for each individual request by Google's server, tailoring it to the user's browser. Based on the user agent, the most appropriate formats (WOFF, EOT, TTF, etc) are selected and only those are listed in the stylesheet.
Because formats like WOFF are much more efficient size-wise than TTF, most browsers will never see a TTF version. Don't worry though – your font will be rendered correctly in all browsers.
I had some issues rendering a TTF font inside Chrome. convert it into Woff solved it. There is some good onlines services for that. You can find them easily. Also, the size of my font got smaller : 29 Ko to 6 Ko, I don't see anymore reasons to use TTF
Actually the issue was that the TTF files can not be renamed or that they should not be renamed. As I did the same they were not being rendered by the browser. While the renaming of the WOFF is just fine as they are compressed files.
The issue was definitely renaming as when i used the Philosopher-Regular.ttf in font face as :
#font-face {
font-family: 'Fancyfont';
src: url('fonts/Philosopher-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
it worked just fine.