Can anyone tell me why Internet Explorer is not picking up the Font-Face I have specified below:
http://www.droneboylaundry.com/homepage
I have checked it multiple times can't see any issues in the CSS:
#font-face {
font-family: 'BertholdAkzidenzGroteskCondensed';
src: url('http://www.droneboylaundry.com/fonts/akzidenzgroteskbe-cn.eot');
src: url('http://www.droneboylaundry.com/fonts/akzidenzgroteskbe-cn.eot') format('embedded-opentype');
src: url('http://www.droneboylaundry.com/fonts/akzidenzgroteskbe-cn.woff') format('woff');
src: url('http://www.droneboylaundry.com/fonts/akzidenzgroteskbe-cn.ttf') format('truetype');
src: url('http://www.droneboylaundry.com/fonts/akzidenzgroteskbe-cn.svg#BertholdAkzidenzGroteskCondensed') format('svg');
}
IE8 has bugs loading the eot files.
If you add a question mark to the end of the url for all the eot includes, it should work:
src: url('http://www.droneboylaundry.com/fonts/akzidenzgroteskbe-cn.eot?');
EDIT: From Paul Irish's Bulletproof #font-face Syntax:
#font-face {
font-family: 'BertholdAkzidenzGroteskCond';
src: url('http://www.droneboylaundry.com/fonts/akzidenzgroteskbe-cn.eot?') format('eot'),
url('http://www.droneboylaundry.com/fonts/akzidenzgroteskbe-cn.woff') format('woff'), url('http://www.droneboylaundry.com/fonts/akzidenzgroteskbe-cn.ttf') format('truetype');
}
EDIT 2: IE has another bug where the font-family name can't be longer than 31 characters. I updated the code above to reflect this change.
Related
I'm having trouble getting my font compatible on all browsers. The .ttf file works on all browsers except explorer. Here is my current code:
#font-face {
font-family: Gotham;
src: url("../Gotham-Book.eot"),
src: url("../Gotham-Book.eot#iefix") format('embedded-opentype');
src: url("../Gotham-Book.ttf") format("truetype");
}
You have too many src: declarations, thus overriding the IE hacks with a new one. Browser sees only tff in your example.
You should have only two, the first being a separate one. Notice how the middle line with fonts has a , instead of ; at the end and how there's no src: in the last oe.
#font-face {
font-family: Gotham;
src: url("../Gotham-Book.eot"),
src: url("../Gotham-Book.eot#iefix") format('embedded-opentype'),
url("../Gotham-Book.ttf") format("truetype");
}
Good day,
I have a css, code is as follow:
#font-face {
font-family: 'dax-regularregular';
src: url('../fonts/daxregular-webfont.eot');
}
body {
font-family: 'dax-regularregular';
}
And, in my html code, I simply code:
<b>this is bold</b> + this is normal
And this is display correctly in chrome, but not in IE (All become normal, not bold).
If I remove the body{} in my css file, then IE will working fine.
If I remove either font-family or src inside #font-face, then IE will working fine.
I do some research on internet, found that .eot file will not support for chrome, that's why chrome wont affected and display correctly. (Not sure my understanding is correct or not)
Kindly advise. And suggest your solution if you have.
** Edit **
#font-face {
font-family: 'dax-regularregular';
src: url('../fonts/daxregular-webfont.eot');
src: url('../fonts/daxregular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/daxregular-webfont.woff') format('woff'),
url('../fonts/daxregular-webfont.ttf') format('truetype'),
url('../fonts/daxregular-webfont.svg#dax-regularregular') format('svg'),
url('../fonts/daxbold-webfont.eot');
font-weight: normal;
font-style: normal;
}
** Edit version 2 **
This solution can fix IE 9, IE 10, and IE 11 issue. But,
This solution introduce new issue to IE 8, which is , normal word will be bold, and the bold word will become "more bold" ( become fatter ). I saw from internet, IE 8 is not support the #font-face rule with the WOFF format (only support for EOT format). So, i take out those url except eot, but still facing the problem.
I change my css code to as follow, but still same hit issue in IE 8:
#font-face {
font-family: 'dax-regularregular';
src: url('../fonts/daxbold-webfont.eot');
src: url('../fonts/daxbold-webfont.eot?#iefix') format('embedded-opentype');
font-weight: bold;
font-style: normal;
}
As your code shows that you have included only .eot format webfont in body in css. The .eot format will work only on IE.
Now since you have added only url('../fonts/daxregular-webfont.eot') [notice 'regular'], the IE browser showing your text in regular or not-in-bold format. So if you want to display your text in-bold format on IE, you would need to add an additional url('../fonts/daxbold-webfont.eot') [notice 'bold'] definition in your css and also the relevant font in your font folder.
Now, why chrome displays it properly? I doubt if chrome would be showing your text in your desired font i.e. dax or .eot. Since you have not defined .woff font in your css (which chrome normally requires), most probably using some other font defined in some other css on your page.
To display your page consistently across all browsers using for custom font you would need to add all fonts definition in your css including adding the same in your font folder -
`#font-face {
font-family: 'dax-regularregular';
src: url('../fonts/daxregular-webfont.eot');
src: url('../fonts/daxregular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/daxregular-webfont.woff2') format('woff2'),
url('../fonts/daxregular-webfont.woff') format('woff'),
url('../fonts/daxregular-webfont.ttf') format('truetype'),
url('../fonts/daxregular-webfont.svg#svgFontName') format('svg');
}`
UPDATE:
First, other then font definition mentioned above you'll also have to add other font formats definitions in your css like
for bold,
#font-face {
font-family: 'dax-bold';
src: url('../fonts/daxbold-webfont.eot');
src: url('../fonts/daxbold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/daxbold-webfont.woff2') format('woff2'),
url('../fonts/daxbold-webfont.woff') format('woff'),
url('../fonts/daxbold-webfont.ttf') format('truetype'),
url('../fonts/daxbold-webfont.svg#svgFontName') format('svg');
}
for semibold,
#font-face {
font-family: 'dax-semibold';
src: url('../fonts/daxsemibold-webfont.eot');
src: url('../fonts/daxsemibold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/daxsemibold-webfont.woff2') format('woff2'),
url('../fonts/daxsemibold-webfont.woff') format('woff'),
url('../fonts/daxsemibold-webfont.ttf') format('truetype'),
url('../fonts/daxsemibold-webfont.svg#svgFontName') format('svg');
}
and so on including relevant fonts in font folder, whichever you need.
Second, for getting these fonts. Not sure but I think your dax font seems a licensed font and not the free one. If yes, then you can convert all above mentioned formats using the ttf / otf font which would have been installed in your system's 'Font' folder. To convert just copy the 'regular' or 'bold' font from that font folder on your desktop and then convert it using website like 'Font Squirrel'
UPDATE 2
The IE needs .eot version web-font only, having .woff won't affect text in any IE version. So don't fear of .woff.
You need to correct your font definition, which is still incorrect in your last post -
for regular or unbold font,
#font-face {
font-family: 'dax-regularregular';
src: url('../fonts/daxregular-webfont.eot');
src: url('../fonts/daxregular-webfont.eot?#iefix') format('embedded-opentype');
}
for bold format font,
#font-face {
font-family: 'dax-bold';
src: url('../fonts/daxbold-webfont.eot');
src: url('../fonts/daxbold-webfont.eot?#iefix') format('embedded-opentype');
}
Your html should look like this -
<p style="font-family: 'dax-regularregular';"><span style="font-family: 'dax-bold';">bold text lying here</span> unbold text lying here</p>
It should work proper across.
Note: Have shown applying font in inline tag to demonstrate html structure, please use your class for the same.
Try adding different types of fonts and specifying there type as well..
#font-face {
font-family: 'dax-regularregular';
src: url('../fonts/daxregular-webfont.eot'); /* IE9 Compat Modes */
src: url('../fonts/daxregular-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/daxregular-webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/daxregular-webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('../fonts/daxregular-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/daxregular-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Add more font file like
font-family: 'dax-regularregular';
src: url('dax-regularregular.eot');
src: url('dax-regularregular.eot?#iefix') format('embedded-opentype'),
url('dax-regularregular.woff') format('woff'),
url('dax-regularregular.ttf') format('truetype'),
url('dax-regularregular.svg#open_sansregular') format('svg');
Generate your font blow link
http://www.fontsquirrel.com/tools/webfont-generator
can someone help me with this problem:
I have this font:
#font-face {
font-family: 'Museo500Regular';
src: url('MuseoSans_500-webfont.eot');
src: local('?'),
url('MuseoSans_500-webfont.woff') format('woff'),
url('MuseoSans_500-webfont.ttf') format('truetype'),
url('MuseoSans_500-webfont.svg#webfontr3rD8cn7') format('svg');
font-weight: normal;
font-style: normal;
}
that is not working on webkit browser and I don't understand why...
O other browsers like, firefox or IE it works just fine but only on webkit is not rendering well.
here you have an example on a test page with a drop down menu, just look at the font on other browsers and google chrome for example.
http://mainpage.ueuo.com/
Thank's.
I have downloaded your MuseoSans_500-webfont.ttf.. looks like its not a valid font... or not uploaded properly on the server... Do upload it again...
Or go to the following link and generate ur font-face css...
http://www.fontsquirrel.com/fontface/generator
#font-face {
font-family: 'Museo500Regular';
src: url('museosans_500-webfont-webfont.eot');
src: url('museosans_500-webfont-webfont.eot?#iefix') format('embedded-opentype'),
url('museosans_500-webfont-webfont.woff') format('woff'),
url('museosans_500-webfont-webfont.ttf') format('truetype'),
url('museosans_500-webfont-webfont.svg#_.regular') format('svg');
font-weight: normal;
font-style: normal;
}
Your CSS definition for #font-face has a wild } on line 11 (see default.css). This is likely causing you some problems.
Also, please, please, please don't use a table for your layout!
Remove single quotes in font name, do not need for single font, it needs only multiple fonts
font-family: Museo500Regular;
I'm having trouble with an #font-face declaration and I'm hoping someone can tell me what the problem is.
Here's my #font-face CSS:
#font-face {
font-family: 'MuseoSlab500';
src: url('fonts/Museo_Slab_500-webfont.eot');
src: url('fonts/Museo_Slab_500-webfont.eot?iefix') format('eot'),
url('fonts/Museo_Slab_500-webfont.woff') format('woff'),
url('fonts/Museo_Slab_500-webfont.ttf') format('truetype'),
url('fonts/Museo_Slab_500-webfont.svg#webfontyumMOUTD') format('svg');
font-weight: normal;
font-style: normal;
My font files are all in a folder in the root of my site called 'fonts'. The stylesheet and the html file (it's a one page site) are in the root. I'm looking at the #font-face and it looks no different than declarations I'ved before yet for some reason this one is not working. Can anyone tell me why this is?
Thanks,
Brian
I always put my web fonts folder inside my CSS folder like this:
#font-face{
font-family: 'CartoGothicStd-Bold';
src: url('#font-face/CartoStd-Bold.eot');
src: url('#font-face/CartoStd-Bold.eot?#iefix') format('embedded-opentype'),
url('#font-face/CartoStd-Bold.woff') format('woff'),
url('#font-face/CartoStd-Bold.ttf') format('truetype'),
url('#font-face/CartoStd-Bold.svg#webfont') format('svg');
}
My folder is called #font-face. Give it a go...see if you get the fonts working.
I just noticed you're missing }
Try to use .otf file instead of .ttf
I had also faced this problem. I got it working by replacing to .otf file.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
#font-face anti-aliasing on windows and mac
This is my css:
#font-face {
font-family: 'Museo500Regular';
src: url('../fonts/Museo500/MuseoSans_500.eot');
src: local('?'),
url('../fonts/Museo500/MuseoSans_500.woff') format('woff'),
url('../fonts/Museo500/MuseoSans_500.ttf') format('truetype'),
url('../fonts/Museo500/MuseoSans_500.svg#webfontr3rD8cn7') format('svg');
font-weight: normal;
font-style: normal;
}
.loginUser form h2{
font-family: Museo500Regular,sans-serif;
font-size: 17px;
font-weight: bold;
}
On IE,Firefox,Opera render well only on webkit browser is not rendering well, can anyone tell me why ? :|
To get proper bold text, you need to use a bold (700) version of the font. If you use another weight and just ask browsers to bold it, they may algorithmically thicken the strokes, and this results in poor or awful rendering, depending on browser.
Rohit: I am sure that was just a typo, as it would break in all browsers
Have you tried the following method:
#font-face {
font-family: 'Museo500Regular';
src: url('../fonts/Museo500/MuseoSans_500.eot?#iefix') format('embedded-opentype'),
url('../fonts/Museo500/MuseoSans_500.woff') format('woff'),
url('../fonts/Museo500/MuseoSans_500.ttf') format('truetype'),
url('../fonts/Museo500/MuseoSans_500.svg#webfontr3rD8cn7') format('svg');
}
It has always worked for me..
Otherwise it might be an error in your Woff file, since that is the one webkit uses
Try this:
font-family: 'Museo500Regular';
src: url('../fonts/Museo500/MuseoSans_500.eot');
src: url('../fonts/ubuntu-r-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Museo500/MuseoSans_500.woff') format('woff'),
url('../fonts/Museo500/MuseoSans_500.ttf') format('truetype'),
url('../fonts/Museo500/MuseoSans_500.svg#webfontr3rD8cn7') format('svg');
Also try adding the following to the .htaccess
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf