I have downloaded this free font kit from http://www.fontsquirrel.com/fonts/Chantelli-Antiqua
and I can see it properly in any common browser (including the old IE6) but in IE7. I just downloaded the kit and opened the demo file in any browser I have installed but IE7 looks like having some problem with it. Is it an IE issue or CSS? Thanks!
CSS code:
#font-face {
font-family: 'ChantelliAntiquaRegular';
src: url('Chantelli_Antiqua-webfont.eot');
src: url('Chantelli_Antiqua-webfont.eot?#iefix') format('embedded-opentype'),
url('Chantelli_Antiqua-webfont.woff') format('woff'),
url('Chantelli_Antiqua-webfont.ttf') format('truetype'),
url('Chantelli_Antiqua-webfont.svg#ChantelliAntiquaRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Try to replace format('embedded-opentype') with format('eot') - should help.
Related
For one of my current web projects I'm using a Candara font, here's how I refer to it in my stylesheet:
#font-face {
font-family: "Candara",sans-serif;
src: url("../fonts/Candara_gdi.otf"); format('otf'),
url("../fonts/Candara_gdi.woff"); format('woff'),
url("../fonts/Candara.woff2"); format('woff2'),
url("../fonts/Candara_gdi.eot"); format('eot'),
url("../fonts/Candara_gdi.ttf"); format('truetype'),
url("../fonts/Candara_gdi.svg#Candara-Regular"); format('svg');
font-style: normal;
font-weight: normal;
}
After testing the site on mobile devices, I've noticed that Candara is not showing (the mobile devices render the fallback font, which is in this case 'sans-serif'). On the other hand, there's no problem with this font on all other desktop browsers, including the notorious IE family and Mozilla.
I'd like to mention that when I wanted to generate a webfont package here, there was a warning saying that Microsoft has blacklisted this font (see the screenshot of the warning):
Hence, I had to "manually" convert this font using some other online solutions. Any ideas on the issue and how to resolve it?
You need to remove the semi-colons after your url-declarations. A semi-colon ends the declaration for the src.
#font-face {
font-family: "Candara",sans-serif;
src: url("../fonts/Candara_gdi.otf") format('otf'),
url("../fonts/Candara_gdi.woff") format('woff'),
url("../fonts/Candara.woff2") format('woff2'),
url("../fonts/Candara_gdi.eot") format('eot'),
url("../fonts/Candara_gdi.ttf") format('truetype'),
url("../fonts/Candara_gdi.svg#svgCandara_gdi") format('svg');
font-style: normal;
font-weight: normal;
}
I have the following font setup in the CSS for a wordpress based site I'm building and the fonts display fine in FF, but not at all in IE(9) or Chrome(latest).
/* =Typography
-------------------------------------------------------------- */
#font-face {
font-family: 'Humanist';
src: url('fonts/humanist521lightbt-webfont.eot');
src: url('fonts/humanist521lightbt-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/humanist521lightbt-webfont.woff') format('woff'),
url('fonts/Humanist521LightBT.ttf') format('truetype'),
url('fonts/humanist521lightbt-webfont.svg#webfontregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'HumanistIT';
src: url('fonts/humanist521lightitalicbt-webfont.eot');
src: url('fonts/humanist521lightitalicbt-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/humanist521lightitalicbt-webfont.woff') format('woff'),
url('fonts/Humanist521LightItalicBT.ttf') format('truetype'),
url('fonts/humanist521lightitalicbt-webfont.svg#webfontregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'HumanistBo';
src: url('fonts/humanist777blackbt-webfont.eot');
src: url('fonts/humanist777blackbt-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/humanist777blackbt-webfont.woff') format('woff'),
url('fonts/Humanist777BlackBT.ttf') format('truetype'),
url('fonts/humanist777blackbt-webfont.svg#webfontregular') format('svg');
font-weight: normal;
font-style: normal;
}
When I need to use the font for an element, I just add font-family: 'Humanist', Arial, sans-serif;
The fonts are stored in the theme's directory in folder called "fonts".
Am I doing something wrong or missing something for it to work with other browsers?
Thanks
Internet Explorer 9 and less has some issues displaying .TTF files. It does not support embedded fonts via the CSS3 scheme without first converting into supported formats (.svg, .ttf, .eot, etc.). However, you can tweak your #Font-Face Syntax to support this.
With Chrome not displaying the correct font, this is due to different browsers having different needs. You can find more information in the second link in the more information below.
A side note as well: if your font is hosted on Google Fonts, embed a link into your website instead of hosting it yourself.
TLDR; need a comprehensive list of #font-face types
More information:
SO Question - IE problems with True Type Font files
SO Question - Font-Face problem in Chrome
Further Hardening of the Bulletproof Syntax - Fontspring.
Bulletproof #font-face syntax - Paul Irish
To use the font for an HTML element, then we need to use the #font-face rule of power full features of CSS3 that supported in many modern browser. CSS property font-family of HTML is used to defined the font name which we want to embed ans src property used to defined the path of the font to be embed.
#font-face
{
font-family: myfont;
src: url('(fontfile.eot') format('embedded-opentype'),
url('(fontfile.woff') format('woff'),
url('(fontfile.ttf') format('truetype'),
url('(fontfile.svg#(fontfile') format('svg');
}
div,h2
{
font-family:myfont;
}
I use #font-face for all my projects and for some reason it is not working in IE8. You can view the site here: http://milkandhoneyhospitality.com/
As you can see in normal browsers, the main font is Bebas Neue, and it is being rendered perfectly. BUT, when we bring it into ie8, it uses a fallback font, arial. It even works great in IE7, so so IE8 is the issue (Screenshot at bottom)
My #font-face is typical:
#font-face {
font-family: 'BebasNeueRegular';
src: url('fonts/BebasNeue-webfont.eot');
src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/BebasNeue-webfont.woff') format('woff'),
url('fonts/BebasNeue-webfont.ttf') format('truetype'),
url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Any idea why this wouldn't be working in IE8 ONLY?
Clearing the IE8 Cache solves the issue
I've been trying to use #font-face on a site, I use the css that font squirrel gives me and it looks good in Safari, IE and on the iphone but in firefox it don´t show up.
I have Firefox 7.0.1 on Mac OSX Snow Leopard.
I've searched the web and tried some of the "solutions" but none has worked.
the site I wanna load this #font-face is http://www.utochinredning.se
Can some one point me in some direction of what might be a solution?
Post your code?
Shot in the dark, but have you included all the appropriate font files? This is a sample of what your #font-face should look like (at least what mine looks like)
#font-face {
font-family: 'Museo300';
src: url('Museo300-Regular-webfont.eot');
src: url('Museo300-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('Museo300-Regular-webfont.woff') format('woff'),
url('Museo300-Regular-webfont.ttf') format('truetype'),
url('Museo300-Regular-webfont.svg#Museo300') format('svg');
font-weight: normal;
font-style: normal;
}
I have the following font files:
Museo300-Regular-webfont.eot
Museo300-Regular-webfont.svg
Museo300-Regular-webfont.ttf
Museo300-Regular-webfont.woff
Then in your stylesheet:
h1 {
font-family: "Museo300";
font-weight: normal;
}
Hey guys, for some reason, I have FireFox not complying with the supposed "bullet-proof" method of getting a custom font in every modern browser.
Well, I hope I'm just doing something wrong, because it looks to me as though it really should be working.
Here is my CSS style:
#font-face {
font-family: 'SMB';
src: url('/css/type/SMB.eot');
src: local('ò∫'),
url('/css/type/SMB.woff') format('woff'),
url('/css/type/SMB.ttf') format('truetype'),
url('/css/type/SMB.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}
My URL is http://www.marioplanet.com if you would like to check out the live FireFox problem.
You can refer MDN Web Docs #font-face