im running #font-face on a site it works fine accross all browsers firefox, chrome, safari ect, but on ie(all versions by the looks of it) its falling short.
ive attached example images of whats happening bellow, its in firefox on the left (this is how it is in all other browsers) and in ie on the right
this is the css that im using for the font-face
#font-face {
font-family: 'rll';
src: url('../type/rll.eot?') format('eot');
src: url('../type/rll.eot?#iefix') format('embedded-opentype'),
url('../type/rll.woff') format('woff'),
url('../type/rll.ttf') format('truetype'),
url('../type/rll.svg') format('svg');
}
is there an obvious mistake ive made ? So i know which one is causing the problem, could you also let me know which font file ie uses ?
Related
I have some web fonts that work correctly in all browsers except IE11. The strange thing is, if you go to this page: http://cscart.create26.com/index.php?dispatch=products.view&product_id=179 and then inspect the "features" bullet points with IE11 developer tools, suddenly all the fonts work. Any ideas?
#font-face {
font-family: 'Helvetica-Condensed-Black';
src: url('../media/fonts/helvetica-condensed-black-webfont.eot');
src: url('../media/fonts/helvetica-condensed-black-webfont.eot?#iefix') format('embedded-opentype'),
url('../media/fonts/helvetica-condensed-black-webfont.woff') format('woff'),
url('../media/fonts/helvetica-condensed-black-webfont.ttf') format('truetype'),
url('../media/fonts/helvetica-condensed-black-webfont.svg#helvetica-condensed-black-sRg') format('svg');
font-weight: normal;
font-style: normal;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'Helvetica-Condensed-Black';
src: url('../media/fonts/helvetica-condensed-black-webfont.svg#helvetica-condensed-black-sRg') format('svg');
}
}
Turns out I had a blank font-family declaration on the body tag. I must have forgotten to remove it when I was making some changes. Removing the blank "font-family: ;" fixed the issue.
It works fine here. But if you check your developer tool's network tab, you'll see you're loading a lot of variations of the same font. In Chrome, you're loading both the WOFF and the SVG version of Helvetica Black Condensed, and the SVG, WOFF and TTF for Helvetica Condensed.
I figure improving your #font-face rule will reduce the chance of weird browser quirks.
This is a little unrelated to the question but may help someone stumbling upon this post.
IE11 not printing web page. It turns out that CSS files that reference #font-face in them will result in IE11 printing to fail.
Tested and confirmed on Windows 7 Professional.
The problem is the whole website doesn't show text until I inspect element with Chrome. It all works fine on other browsers.
I don't have any chrome extensions installed and am using an incognito window, but still nothing.
The website passes validation via W3C - the site is: http://www.toricks.com
I'm using #font-face, which by looking at it seems to be setup fine!
Can anyone shed any light on this?
You can try the Font Squirrel way of adding the #font-face like this:
#font-face {
font-family: 'Comfortaa';
src: url('comfortaa.eot');
src: url('comfortaa.eot?#iefix') format('embedded-opentype'),
url('comfortaa.woff') format('woff'),
url('comfortaa.ttf') format('truetype'),
url('comfortaa.svg#comfortaanormal') format('svg');
font-weight: normal;
font-style: normal;
}
I think this has the best cross-browser support. Make sure you convert your font to all the different types (you can do that with the Font Squirrel generator).
I'm having some issues with the font-face property. This code works in every browser, even IE8 and lower, but I cannot get it to fire off in IE9 or 10. I've scanned this board and google and have found a bunch of solutions, but nothing seems to wanna work for me. Here is my code:
#font-face {
font-family: din_light;
src: url('din_light.ttf?') format('truetype'),
url('din_light.eot');
}
Does anyone see anything wrong here..?
Researching others with similar issues, it seems to be that IE 9 likes to utilize the WOFF version of the font, even if you specify the EOT in another source URL like you have (when using multiple sources at once). Try the following code and let me know how it goes:
#font-face {
font-family: 'din_light';
src: url('din_light.eot'); /* IE9 Compat Modes */
src: url('din_light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('din_light.woff') format('woff'), /* Modern Browsers */
url('din_light.ttf') format('truetype'), /* Safari, Android, iOS */
url('din_light.svg#svgFontName') format('svg'); /* Legacy iOS */
}
If you don't have the other font types you can get them from webfont-generator (fontsquirrel)
Code above was found here: Fixing IE 9 #font-face problems
I'm having an issue with #font-face in my site with two browsers: Firefox and Chrome.
In Firefox the #font-face rule just doesn't work, it uses the fallback font —Helvetica—
I have declared the font like this at the top of my stylesheet:
#font-face {
font-family: 'pf_centro_sans_proregular';
src: url('http://static.algarabia.com/CDN/fonts/pfcentrosanspro-reg-webfont.eot');
src: url('http://static.algarabia.com/CDN/fonts/pfcentrosanspro-reg-webfont.eot?#iefix') format('embedded-opentype'),
url('http://static.algarabia.com/CDN/fonts/pfcentrosanspro-reg-webfont.woff') format('woff'),
url('http://static.algarabia.com/CDN/fonts/pfcentrosanspro-reg-webfont.ttf') format('truetype'),
url('http://static.algarabia.com/CDN/fonts/pfcentrosanspro-reg-webfont.svg#pf_centro_sans_proregular') format('svg');
font-weight: normal;
font-style: normal;
}
If I type the URI in the browser it download the font without problem, so, the font is there (Opera and Safari displays the site with the right font)
In Chrome suddenly (with some update I guess) the menu changed to the fallback font, yes, just the menu, the rest of the site behaves as expected.
I know the font is there and my CSS shouldn't be that bad because it works in Safari (both, desktop and mobile) and in Opera.
Any hints with this?
Thank you for your time and help.
It should just be a matter of changing the font url from http://fonts.googleapis.com/css to https://fonts.googleapis.com/css to secure this link.
For some reason, when I view this page in IE9, all of the #font-face fonts look way smaller than they should, and maybe like a different typeface too. As far as I can tell, everything about my syntax should be cooperating with IE9. Others have had trouble replicating the issue, so maybe it is something in my Windows font settings? Either way, if you want to try to replicate what I am seeing, I am running IE9 on Windows 7 64bit.
EDIT: I'm not sure if this is a problem with the page, or a problem with my browser. Either way, I need to get it fixed.
Looks the same for me in IE9 as other browsers, none are using the embedded font due to its different name (HelveticaMD vs the actual name in use in the CSS, Helvetica.)
It looks like your “wrong” screenshot is of a browser trying to actually use the embedded font, whereas the “right” screenshot is just the default font. If that's what you want, just get rid of the font embedding stuff.
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Usage Example:
#font-face {
font-family: MyFont;
src: url(http://mysite/fonts/MyFont.ttf)
format("embedded-opentype");
}
p {font-family: MyFont, serif;
}
.woff solves the problem in IE9. I've used .eot for chrome & firefox. And .woff for IE9. Now the 3 browsers are working fine and showing the same results. Following is the code in CSS. #font-face {font-family: 'cert_fonts'; src: url('../fonts/GoudyTrajan.eot') format('eot'); src: url('../fonts/GoudyTrajan.woff') format('woff'); font-weight: normal; font-style: normal;}