I have created font icons through icomoon. And used the below code to add the fonts in the CSS of a web page:
#font-face {
font-family: 'xlfont';
src: url('./images/spreadsheet/xlicons.eot?-dzszjm');
src: url('./images/spreadsheet/xlicons.eot?#iefix-dzszjm') format('embedded-opentype'),
url('./images/spreadsheet/xlicons.woff?-dzszjm') format('woff'),
url('./images/spreadsheet/xlicons.woff') format('woff'),
url('./images/spreadsheet/xlicons.ttf?-dzszjm') format('truetype'),
url('./images/spreadsheet/xlicons.svg?-dzszjm#ssicons') format('svg');
font-weight: normal;
font-style: normal;
}
This is working fine in IE11 until I enabled the option “untrusted font blocking”. Once I enabled this option, I got the following error.
CSS3111: #font-face encountered unknown error.
xlicons.eot
Anyone else had an issue like this? Could you please give any suggestion are workaround for this?
Try commenting out the embedded-opentype declaration line. If that doesn't work, consider the following from another answer on stack:
CSS3111 is usually caused by an issue with the font's binary source.
One of the popular online TTF to EOT converters for example produces
EOT files with a NAME table that doesn't comply to the Microsoft
standards, which results in EOT fonts that never load in IE and
produce the CSS3111 error. So, when you experience a CSS3111, it is
always good to try using a different TTF to EOT converter or font face
generator.
OG question: IE9 - CSS3111: #font-face encountered unknown error
Reference: http://marinbezhanov.com/how-to-embed-webfonts-properly-and-how-to-solve-the-ambiguous-css3111-font-face-encountered-unknown-error/
I have 7 websites (different domains on one shared hosting account) all sharing the same CSS file, all of them display 3 fonts correctly except one URL, and it is just one font that doesn't display, I am loading 3 custom fonts, 2 are fine, 1 not, and they are all loaded the same way.
Any idea what's happening?
Here is the problem site ... http://www.theridgesresort.com/
Here is a site that works ... http://www.fontanavillage.com/
Please view the sites at less than 750 pixels wide, it is just the mobile style. Look at the big yellow buttons.
I just copied the same path from the correct site to the other and it works for me:
#font-face {
font-family: 'copperplate_boldcondensed';
src: url('copperplate_boldcondensed/Copperplate-BoldCond-webfont.eot');
src: url('copperplate_boldcondensed/Copperplate-BoldCond-webfont.eot?#iefix') format('embedded-opentype'),
url('copperplate_boldcondensed/Copperplate-BoldCond-webfont.woff') format('woff'),
url('copperplate_boldcondensed/Copperplate-BoldCond-webfont.ttf') format('truetype'),
url('copperplate_boldcondensed/Copperplate-BoldCond-webfont.svg#copperplate_gothic_boldRg') format('svg');
font-weight: normal;
font-style: normal;
}
Make sure that
The paths are all correct. Maybe the one site-structure has submaps
etc. You can use relative paths (../)
Check for spelling mistakes
I see in your stylesheet (fonts.css) a reference to this, yet there is no folder there with the font.
src: url('http://www.anchorsouthmanagement.com/assets/css/copperplate_bold/Copperplate-Bold-webfont.eot');
I guess the problem is with loading the different stylesheet on mobile. This is what the console spits out:
I have some css like this:
font-family: "Open Sans Condensed",sans-serif;
And I'm having a hard time understanding how the displayed font is chosen. I always thought that the browser checks if the client has the first font installed, and if not, it uses the next font in the list. But now I've run into an issue where in my local and testing environments, using Firefox, the first font is used, but in production, using the the same browser on the same machine, the second font is chosen.
Why does the website use one font on one server and the other on a different server?
Is there any way to make it use the same font on all servers without #font-face?
Figured it out...
This line was importing the font from Google:
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>
On the production server, they've decided to disallow all external requests like this, so it can't load the font. That's not the case on our other servers...
So I donwloaded the font from Google, generated webfonts at http://www.fontsquirrel.com/tools/webfont-generator, and then added the following css:
#font-face {
font-family: 'Open Sans Condensed';
src: url('../fonts/opensans-condbold-webfont.eot');
src: url('../fonts/opensans-condbold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/opensans-condbold-webfont.woff2') format('woff2'),
url('../fonts/opensans-condbold-webfont.woff') format('woff'),
url('../fonts/opensans-condbold-webfont.ttf') format('truetype'),
url('../fonts/opensans-condbold-webfont.svg#open_sans_condensedbold') format('svg');
font-weight: normal;
font-style: normal;
}
Why not to use #font-face? It is well supported and invented to avoid this kind of problems. Please remember that for security reasons, does not work for subdomains in FF.
Might have to do with the way the browser looks for the fonts in a local server vs live server. I had an issue before with naming a font "Open Sans Condensed" vs "OpenSans-Condensed" (it was a different font, but followed the same rule) which was the font filename. So maybe you could find the filename and add it to your 'font-family' tag.
I hope I'm asking this question in the right place,
I'm working on a website for a friend, here's the site hosted on my goDaddy acc:
http://www.andkensol.com/rowanWeb/
And here it is on my friends:
http://www.rowanmoore.org/
You can see the clear difference in the title font. If you inspect them you'll see they are both using CODE. I personally uploaded all the files myself and the file structure, layout, file paths are all identical yet the font won't render on my friends site.
I downloaded the font from font squirrel and I'm using #font face to implement it in both sites.
CSS
#font-face {
font-family: CODE;
src: url('font/CODE Light.otf');
}
#nameTitle{
font-size:60px;
font-family:CODE;
color:white;
font-weight:400;
margin-bottom:-3%;
}
The 'font folder' is in the same folder as the stylesheet and CODE Light.otf is in the font folder.
Ive deleted the site from my friends server, downloaded it from mine and then uploaded it to my friends and still no luck.
Could this be a problem on goDaddy's end perhaps?
I recommend you to use some webgenerator to generate css file with different formats of font.
I think your problem is wrong #font-face.
#font-face {
font-family: 'nfs';
src: url('yourFont.eot');
src: url('yourFont.eot?#iefix') format('embedded-opentype'),
url('yourFont.woff') format('woff'),
url('yourFont.ttf') format('truetype'),
url('yourFont.svg#yourFontName') format('svg');
font-weight: normal;
font-style: normal;
}
Diffrenet browser need other format to render and open font.
I'm using mostly those three webfont generators
http://onlinefontconverter.com/
http://www.fontsquirrel.com/tools/webfont-generator
http://convertfonts.com/
But there is more, type to uncle google "font generator"
EDIT: i think blank space in your font/CODE Light.otf is the problem try to use for example something like this font/CODE_Light.otf
I guess it's a matter of access rights of your folders/files.
Something like 644 would be necessary for a file to be able to access the font from the outside web (the last 4 => read access for public). You can either use chmod on the console or change the rights in your ftp-client.
Also, you should support more than otf, or you will most likely lock out a significant amount of Internet Explorer Users.
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.