I have a font-face defined in my CSS that looks like the following:
#font-face {
font-family: 'iconFont';
src:
url('../fonts/iconFont.eot?') format('eot'),
url('../fonts/iconFont.woff') format('woff'),
url('../fonts/iconFont.svg#iconFont') format('svg'),
url('../fonts/iconFont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I also have a few other font-faces of a similar format. When using the fully qualified domain name of my PC (eg 'mypc.mydomain.local') Internet Explorer 9+ retrieves the fonts and renders the page correctly. However, when using just the hostname of my laptop (eg 'mypc') IE never even attempts to retrieve the fonts. I have confirmed this using Fiddler.
The only difference I can see is that a different security zone is in effect depending on whether the fully qualified name is used (Internet) or just the hostname (Local intranet). Both of these zones have the "Download Fonts" set to enable on my PC.
If it is related to the security zone then it is surprising that the intranet settings seem to be allowing less than the internet settings. Or it's a bug in IE.
Firefox downloads the fonts and renders correctly regardless of the hostname I use.
Internet Explorer enforces a same-origin or CORS check on WOFF fonts. If you have a page at "mypc.mydomain.local", it can't use a font from "mypc" unless a proper Access-Control-Allow-Origin header is present.
https://developers.google.com/fonts/docs/troubleshooting#CORS_header
Related
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.
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.
I use google webfonts frequently with my website projects but I'm having a peculiar issue that I'm not sure how to cure.
On all of my browsers (FF,Chrome and Safari on OS X 10.8.2) the Open Sans regular font weight (400) is displaying as semi-bold. Here is an example of it even happening on google's webfont library: http://i.imgur.com/sZtWW.png
To make sure it's an issue on my end, I loaded up the page in browserstack. In the browserstack instance it displayed the correct font weight (Chrome 23 on Win 7).
Does anyone have any idea what the problem is?
Your locally installed version of the Open Sans font is overriding that specified in the page's CSS.
Google's default rules to copy and paste from its site will give precedence to the local font.
To ensure the CSS-specified font takes precedence, use this CSS directive:
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url(https://themes.googleusercontent.com/static/fonts/opensans/v6/u-WUoqrET9fUeobQW7jkRT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
When using Google Web Fonts on Chrome under windows 7, the fonts seem to render incorrectly, while on a Mac OSX (on Chrome, Safari and Firefox) it looks fine. Is there a way to prevent this via CSS or HTML?
The site introducing this behavior can be found here (it might take a while until it loads).
Here's a snapshot showing this:
Alright so this has to do with the way Chrome renders fonts in windows. There is a tool you can use called MacType which changes the rendering engine that windows uses to render fonts.
You can download it here: https://code.google.com/p/mactype/
From everything that i have researched, with google web fonts on windows there currently does not exist a way to fix this issue.
Its simply by design how it works.
You can follow the issue on Chromiums Google Code site..
https://code.google.com/p/chromium/issues/detail?id=137692
heres a snip from the above link that goes in to more detail
As I understand it: the main problem is the fact that Chrome continues
to use the old Windows GDI for rendering fonts, and it looks poor. All
other modern browsers (except Opera) have switched to using
DirectWrite on Windows, resulting in much better font rendering,
leaving Chrome lagging.
If you look back at older versions of IE and Firefox you'll see their
font rendering a few years ago looked exactly the same as Chrome's
does today on Windows. People just didn't notice as much back then as
nobody was using web fonts; when you're using Arial, Verdana etc they
look OK because those fonts have been carefully designed and hinted to
work well with the GDI engine. Most web fonts have not.
for developers, one work around is to put SVG first, doubt this is proper though
-before--------------
#font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
url('../../includes/fonts/chunk-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
-after--------------
#font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.svg') format('svg'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I found some solution here and it works for me
Have added a temporary fix with the following code...
$('body')
.delay(500)
.queue(
function(next){
$(this).css('padding-right', '1px');
}
);
How come the font FixedSys and Terminal ONLY work on FireFox and not on any other major browser?
What's the deal? Is it because they are system fonts or am I missing something?
Thanks
I know this is old, but I converted http://www.fixedsysexcelsior.com/ to a Webfont a while back.. the files are here:
http://jollo.org/archive/doir/fixedsys
css usage is:
#font-face {
font-family: 'FixedsysExcelsior301Regular';
src: url('fsex300-webfont.eot');
src: url('fsex300-webfont.eot?#iefix') format('embedded-opentype'),
url('fsex300-webfont.woff') format('woff'),
url('fsex300-webfont.ttf') format('truetype'),
url('fsex300-webfont.svg#FixedsysExcelsior301Regular') format('svg');
font-weight: normal;
font-style: normal;
-webkit-font-smoothing:aliased;
font-smooth:never;
}
Firefox does have a little bit of trouble rendering it in some instances.. but this appears to be a bug with many webfonts (fonts appear blurry when the browser is a certain size, normal when another size.
How come the font FixedSys and
Terminal ONLY work on FireFox and not
on any other major browser?
What's the deal? Is it because they
are system fonts or am I missing
something?
The fonts do not depend on browser, they should be applied if they are present on the client machine. If you can view it in FF, they should be viewable in other browsers as well. The FixedSys font is shipped with Windows and is available (Not sure about other OS). Make sure that you can differentiate it or there could be some other problem. Using reset CSS may also help.
Those fonts aren't available everywhere (for example Linux). If you want to display monospaced text, use monospace as fallback. It defaults to the standard monospace font of the system.