Web font is not rendered properly in firefox. It working fine for Chrome browser.
Below is my CSS code,
#font-face {
font-family: 'DINm';
src: url('http://www.themediaverse.com.au/wp-content/themes/themediaverse/assets/fonts/DINWeb-Medium.eot');
src: url('http://www.themediaverse.com.au/wp-content/themes/themediaverse/assets/fonts/DINWeb-Medium.eot?#iefix') format('embedded-opentype');
src: url('http://www.themediaverse.com.au/wp-content/themes/themediaverse/assets/fonts/DINWeb-Medium.woff') format('woff');
src: url('http://www.themediaverse.com.au/wp-content/themes/themediaverse/assets/fonts/DINComp-Medium.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I have referred below url,
CSS Font-Face url not working?
How can i resolve this problem?
Thanks.
Those links are to font files that don't allow cross-site linking. Chrome doesn't follow that part of the specification, but Firefox does.
See the "published site" part https://stackoverflow.com/a/3704578/720912 for how to configure the server to allow linking to the fonts.
change the code from
format ('truetype');
to
format ('opentype');
and this should work for you.
That was listed in the article referenced from the other page near the bottom and it worked for me. This fiddle shows the working example: http://jsfiddle.net/Phlume/CMv8G/1/
You should see this:
The article also mentioned that for otf or ttf fonts you can leave the format section off entirely -- it is optional as the format is open type.
Related
I am attempting to use the following webfont kit from Font Squirrel on a webpage - http://www.fontsquirrel.com/fonts/DJ-Gross
On the 'Webfont kit' tab on the above page, I selected 'No subsetting' form the dropdown and then clicked 'DOWNLOAD #FONT_FACE KIT'
I think font squirrel does a great job of setting out the #font-face declaration for you so I have just used this in my css and moved the font files (.eot, .svg, .ttf, and .woff) to an appropriate directory to use on my site where fairly sure filepaths are referenced correctly.
This font is rendering in Safari but not Chrome
Disregarding my webpage, this can be reproduced by opening the DJGROSS.html file that comes with the Font Squirrel download. Again, this demo works in Safari but not Chrome and I have not touched this code at all :)
EDIT:
#font-face {
font-family: 'dj_grossnormal';
src: url('DJGROSS-webfont.eot');
src: url('DJGROSS-webfont.eot?#iefix') format('embedded-opentype'),
url('DJGROSS-webfont.woff') format('woff'),
url('DJGROSS-webfont.ttf') format('truetype'),
url('DJGROSS-webfont.svg#dj_grossnormal') format('svg');
font-weight: normal;
font-style: normal;
}
All the font files are in the same directory as my style.css file where this #font-face declaration is
is working... look this image try to clean you Google Chrome!
If you open the dev console and see what files the browser is pulling from your site, you'll be able to see if it's downloading the font file in safari. Some more information like this will help us to answer your question.
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.
In this site I am currently coding Im using webfonts that are stored on my server.
Every browser displays them just fine but not chrome.
Chrome uses Times New Roman instead.
After checking the developer tools on chrome I found that they fonts ARE being requested from the server and retreived successfully.
For some reason, Chrome wont use them.
I did notice that if I install the fonts on my computer (Using Windows, BTW), the suddenly work on chrome aswell.
Here's my font-face decleration:
#font-face {
font-family: 'BNLunch';
src: url('BN_Lunch.eot');
src: url('BN_Lunch.eot?#iefix') format('embedded-opentype'),
url('BN_Lunch.woff') format('woff'),
url('BN_Lunch.ttf') format('truetype'),
url('BN_Lunch.svg#BNLunchregular') format('svg');
font-weight: normal;
font-style: normal;
}
Any insights?
EDIT:
I forgot to mention that this particular CSS works with other fonts.
Only this particular font and BNMadregot are giving me trouble.
Could it be that it is because the English letters of this font are blank?
I have a similar CSS code here that works fine on every browser, even Chrome.
#font-face {
font-family: "standard 07_58";
src: url("../fonts/standard_07_58/stan0758.eot?") format("eot"),
url("../fonts/standard_07_58/stan0758.woff") format("woff"),
url("../fonts/standard_07_58/stan0758.ttf") format("truetype"),
url("../fonts/standard_07_58/stan0758.svg#Standard0758") format("svg");
font-weight: normal;
font-style: normal;
}
There are some differences from your CSS, so try to follow this pattern and see what happens.
The font is broken (as FontSquirrel told you). Don’t use it. I downloaded BN Lunch from the site you mentioned and processed it with font-face-generator.com, and test .html page it generated does not show characters in that font (and yes, I tried common digits and Hebrew letters, too) on Chrome or on Firefox, only on IE (tested on Win 7). Chrome dev tools shows that Chrome gets the font files and does not signal errors, so apparently the internal tables of the font are broken (e.g., giving wrong information about character coverage). The site that distributes it looks suspiciously like one of the many illegal font distribution sites; e.g., authors or copyright holders of fonts are not mentioned.
So, get another font.
Since some days, my Google Chrome browser doesn't show special fonts : CSS with font-face.
#font-face {
font-family: 'Babel Sans';
src: url('../fonts/babelsans.eot');
src: url('../fonts/babelsans.eot?#iefix') format('eot'),
url('../fonts/babelsans.woff') format('woff'),
url('../fonts/babelsans.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
All working fine with Safari, Firefox and IE, and it worked fine the last week.
Someone has the same problem and someone know how I can resolve it ?
Thanks,
I'm experiencing the same issue since Chrome 20 update. This thing happen in Windows Xp and Mac Os X 10.6.8.
Safari and Mobile Safari (that share WebKit engine with Chrome) works perfectly like Firefox and IE.
My css code is exactly like yours.
Looking in the inspector it seems that the font doesn't get downloaded.
Sometimes while navigating different pages (that share the same css external file) in my website the font loads and get displayed properly.
Still trying to solve this...
EDIT:
I managed to solve this issue.
I don't know why, but using this worked:
http://www.fontsquirrel.com/fontface/generator/
I uploaded my font, got the css and converted files, uploaded them to my server and replaced font-face declaration...bling! It works! Hope that works for you too!
It's working now, I think Google has update the browser.
Since there was an update of Chrome for about a week, you may try using an older version to find out if it's a bug (I myself didn't notice any problems). Get one at http://www.oldapps.com/google_chrome.php.
Also check if you're using this font in addion to other font-related CSS values (if so, deactivate them). There were some problems in the past which actually have been solved, but you never know...
First: Convert you font using this service as Mr Stefano suggest:
Later use this CSS code to use your font in your project:
#font-face {
font-family: 'aljazeeraregular';
src: url('aljazeera-webfont.eot');
src: url('aljazeera-webfont.eot?#iefix') format('eot'),
url('aljazeera-webfont.woff') format('woff'),
url('aljazeera-webfont.ttf') format('truetype'),
url('aljazeera-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
body {
background-color: #eaeaea;
font-family: 'Aljazeera';
font-size: 14px;
}
Note that when you call font-family in your site you have to use its original name not like what you declare it in #font-face.
As described above, I have issues with #font-face not displaying in IE9 although it displays fine in every other browser including IE8 and under. Additionally, when viewing locally on my computer, IE9 does display the font, just not when fully live.
The site is:
bigwavedesign.co.uk/gcc/gcc/
The code used is:
#font-face {
font-family: 'LeagueGothicRegular';
src: url('league_gothic_0-webfont.eot');
src: local('League Gothic Regular'), url('league_gothic_0-webfont.woff') format('woff'), url('league_gothic_0-webfont.ttf') format('truetype'), url('league_gothic_0-webfont.svg#webfonta36nFpyE') format('svg');font-weight: normal;font-style: normal;
}
Anyone any ideas why this might be occurring?
Cheers!
=============================================
EDIT
I have found the following site that displays the same font ok in IE9, anyine any ideas how he did that?
http://iamthomasbishop.com/
No answer, just confirmation: I have a similar kind of problem. Font works in all other IE versions except IE9, both using IETester and original browser. When changing Document Mode (F12 dev tools) font works. Not how I'd like it though.
Update: With some trickery I managed to get it working. Seems like IE9 is using the .woff version of the font (which I had excluded) over the .eot that I thought it would. I used the #font-face generator from fontsquirrel to get all the different font variations and included them in my project, using the smileyface-local. Did not have to alter my .htaccess file. Now works fine and looks the same in all IE versions:
#font-face {
font-family: "LucidaFax-bold";
src: url("_font/LucidaFax-bold.eot");
src: local("☺"),
url("_font/LucidaFax-bold.woff") format("woff"),
url("_font/LucidaFax-bold.ttf") format("truetype"),
url("_font/LucidaFax-bold.svg#LucidaFax-bold") format("svg");
}
h1 { font-family: "LucidaFax-bold", serif;}
(I even got mad fresh using Mark "Tarquin" Wilton-Jones' text-shadow hack, applying same look to IE versions as rest of the browser world. Old school? Looks great! Was it worth it? Well, learned a lot. ;)
I have just had the very same problem with Web Fonts hosted on an IIS7 site, as suggested by Grillz the issue was down to MIME Types.
I have elected to use "application/octet-stream" based upon the answers to the Mime type for WOFF question.
Open IIS and select the site that hosts the fonts (must be the same domain name for IE9 and Firefox)
Double click "Mime Types"
Click "Add..." in the top right hand corner.
In "File name extension:" enter ".woff"
In "MIME type:" enter "application/octet-stream"
Hope that saves someone 10 minutes in the future.
For us the trick was to just change the format on the .eot files we're serving up.
Works in IE6-9, Firefox 3-4, Chrome, Safari, Android, iPhone.
#font-face {
font-family: 'Museo';
src: url('/ui/museo300.eot?') format('eot'),
url('/ui/museo300.ttf') format('truetype')
}
Becomes:
#font-face {
font-family: 'Museo';
src: url('/ui/museo300.eot?') format('embedded-opentype'),
url('/ui/museo300.ttf') format('truetype')
}
My solution is to declare two different fonts:
#font-face {
font-family: "Dereza bold";
src: local("Dereza bold"), url("../../assets/otf/dereza_bold.otf") format("opentype");
}
#font-face {
font-family: "IE Dereza bold";
src: url("../../assets/eot/dereza_bold.eot");
}
And then:
.divclass {
font-family: "Dereza bold", "IE Dereza bold";
}
Abalore +1
My solution:
#font-face {
font-family: "OfficinaSansBookSCC";
src: url('font/OfficinaSansBookSCC.eot');
src: url('font/OfficinaSansBookSCC.eot') format('embedded-opentype'),
url( 'font/OfficinaSansBookSCC.ttf' ) format("truetype");
}
working in IE 7-9, chrome, opera, firefox.
first line needed for IE 9, second for IE 7-8.
Well since you've edited your post the below text won't be the answer. Are you pointing to the correct directory? Any chance of this being a mime type issue from the server?
====================================================
This might be it:
It’s important to note that your site must render in documentMode 9 in order to take advantage of the new features included with IE9 (that includes all new features in IE9, not only the ones related to web fonts). If you haven’t heard of documentMode before, Microsoft has put together a guide which explains what it is and how you can use it on your site.
from http://blog.typekit.com/2010/09/03/typekit-adds-experimental-support-for-ie9/
In IE9 - F12 look at the debug screen see if there are any CSS3117 errors.
See also: IE9 blocks download of cross-origin web font
Font Squirrel also provides a wonderful generator tool to help you create a font kit that will include the required formats, already-written CSS, and even a demo page to see how it's all used, along with help with problems you may encounter.
It was a breeze to incorporate its output into my site and it did fix the problem perfectly.
You should check out this blog post Paul Irish has a few things to say about the problems you are coming across and he comes up with what he calls a 'bulletproof' #font-face statement.
http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
http://www.fontsquirrel.com uses this for its sample CSS which worked OK for the project I was working on.
#font-face {
font-family: 'QuicksandBook';
src: url('/Quicksand_Book-webfont.eot');
src: url('/Quicksand_Book-webfont.eot?#iefix') format('embedded-opentype'),
url('/Quicksand_Book-webfont.woff') format('woff'),
url('/Quicksand_Book-webfont.ttf') format('truetype'),
url('/Quicksand_Book-webfont.svg#QuicksandBook') format('svg');
font-weight: normal;
font-style: normal;
}
I had this problem. Turns out I was missing a comma in the font-family declaration.
I wanted to add yet another thing that could possibly go wrong in this scenario. IE9 has a rule that discards all #font-face declarations that can not be cached after the first load. IE9 will actually use the font correctly on the first display, but on subsequent refreshes, the #font-face will be disabled. I discovered this after closing my browser by chance, and then reopening it to find that my font was working mysteriously, only to stop working one refresh later.
To fix this, you simple need to make sure that the request serving your font has a Cache-Control response header of something other than no-cache. I would recommend setting it to max-age=3600. This will ensure your font is cached for an hour. IE9 will then be able to display your font consistently.