Something wrong here?
Here is the added CSS.
#font-face {
font-family: NeutraText-Book;
src: url('../fonts/NeutraText/NeutraText-Book.eot'); /* IE9 Compat Modes */
src: url('../fonts/NeutraText/NeutraText-Book.eot?#iefix') format('embedded-opentype');
src: url('../fonts/NeutraText/NeutraText-Book.otf');
src: url('../fonts/NeutraText/NeutraText-Book.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
The relative URLS are correct, as they work in Firefox and Chrome.
I used the following tool to convert from .ttf to .eot http://ttf2eot.sebastiankippe.com/
I am using Internet Explorer v10 and it displays another font instead, looks like Verdana or something.
IE says:
CSS3111: #font-face encountered a unknown error
NeutraText-Book.otf
CSS3114: #font-face failed with the control of OpenType-embedd permission. Permission must be installable.
NeutraText-Book.otf
(Translated myself from my primary lang).
Browsers may check, in different ways and to a varying degree, that an embedded font (web font, #font-face font) is used according to its license conditions. This appears to be the case here, as the second error message says rather clearly.
Contact the vendor of the font for conditions on using it and possibly purchasing a version licensed for use as embedded font, or try and find some alternative font for which use as embedded font is allowed, such as one of the many Google fonts.
Related
I have very strange problem about #font-face font Proxima Nova Bold (Polish letters) which I bought in shop. I tested it on different browsers and systems and my two friends which has got Firefox and Windows 7 has got missing letters.
I found solution with disabling ligatures, but it doesn't work because we can see that there are single letters missing, for example T, A or 3.
Example:
Can it be technical problem with font, should I ask fontspring? Or can I repair it by CSS? It is quite difficult to test because I don't have access to computers which has got that situation and not every Firefox on Windows 7 has got that bug. This is problem with font because when we changed in inspector to Arial everything was good.
It can be not connected but the same person who has got missing letters on firefox has got all letters missing on Chrome 37 with Direct Write enabled. When we disabled Direct Write letters were shown.
This is how I load it in CSS:
#font-face {
font-family: 'ProximaNova-Bold';
src: url('assets/fonts/ProximaNova-Bold-webfont.eot');
src: url('assets/fonts/ProximaNova-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/ProximaNova-Bold-webfont.woff') format('woff'),
url('assets/fonts/ProximaNova-Bold-webfont.ttf') format('truetype'),
url('assets/fonts/ProximaNova-Bold-webfont.svg#proxima_nova_rgbold') format('svg');
font-weight: normal;
font-style: normal;
}
I used this exact font on a project recently and did not experience any issues with it across a wide variety of browsers. Try generating the font yourself from the original file for a sanity check.
You should not and most likely will not be able to resolve using CSS.
Try downloading the file again and serving it again. Sometimes your file could have been corrupted.
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.
I have generated a #font-face with FontSquirrel, and resulted these (tweaked later) rules:
#font-face {
font-family: 'CabinSketchRoBold';
src: url('cabinsketchro-boldwebfont.eot');
}
#font-face {
font-family: 'CabinSketchRoBold';
src: url('cabinsketchro-boldwebfont.woff') format('woff'),
local('?'), url('cabinsketchro-boldwebfont.ttf') format('truetype'),
url('cabinsketchro-boldwebfont.svg#CabinSketchRoBold') format('svg');
font-weight: normal;
font-style: normal;
}
Style is applied in the css file like this:
h1,h2,h3,h4,h5,h6 {font-weight:normal;font-family:'CabinSketchRoBold',Arial,sans-serif !important; }
Everithing works fine in Chrome, even in InternetExplorer, but in newer versions of Firefox, the font doesn't load. It loads in FF 3.6... o_O
I have another font, Ubuntu, loaded from Google via the JavaScript option, and that one loads ok, even on the headings, after changing
font-family:'CabinSketchRoBold','Ubuntu',Arial,sans-serif !important;
What's wrong with the declarations that makes FF ignore my local font?
EDIT: this is not only on localhost, it happens on the live site too. I have looked at other answers and tried them out, but no luck. WOFF was even base64 encoded, same result.
SOLVED: Seems that the .eot being in a separate declaration (again, FontSquirrel generated) was doing the damage. Moving it with the others solved it. Thanks Boris Zbarsky!
#font-face {
font-family: 'CabinSketchRoBold';
src: url('cabinsketchro-boldwebfont.eot?#') format('eot'),
url('cabinsketchro-boldwebfont.woff') format('woff'),
local('?'), url('cabinsketchro-boldwebfont.ttf') format('truetype'),
url('cabinsketchro-boldwebfont.svg#CabinSketchRoBold') format('svg');
font-weight: normal;
font-style: normal;
}
Your problem is that you are actually defining two separate faces of the "CabinSketchRoBold" font.
The first face is normal weight and uses .eot file for the font data.
The second face is bold weight and uses one of woff, truetype, svg, whichever is available.
Then you're styling text that's normal weight. So the first face is picked. See http://dev.w3.org/csswg/css3-fonts/#font-style-matching for the spec on this.
In particular, following the steps in that spec, in step 4 we end up a single face: the .eot one. But since the browser can't do anything with that font format, this face has no glyphs so in step 5 the browser moves on to the next family name. The other (bold) face in the "CabinSketchRoBold" family is not considered, per spec.
So the upshot is that you should either list font-weight: bold in both your rules or in neither one. Then the .eot and the other options would all be considered as sources for a single font face, not for different faces in the same family.
It looks like Chrome doesn't actually follow the spec here, unfortunately...
The latest versions of Firefox are able to show the font related errors in the tools->web developer->errors console. for example this is the error I give with a custom font:
Error: downloadable font: table 'GSUB': OpenType layout data discarded
You must have this font type for working in IE,Firefox,Chrome
#font-face
{
font-family: 'BHoma';
src: url('/public/font/BHoma.eot?#')format('eot'),
url('/public/font/BHoma.ttf')format('truetype'),
url('/public/font/BHoma.woff')format('woff'),
url('/public/font/BHoma.svg#BHoma')format('svg');
}
but you first must generate your font from this link
http://www.codeandmore.com/2011/06/font-face-kit-generator/
According to this article, http://www.standardista.com/css3/font-face-browser-support IE supports #font-face but I couldn't find any site which has valid custom font face working for IE
Also, if IE supports custom font via #font-face from early on (IE6), then why people still using cufon for instance?
Any clarifications or examples?
Older version of Internet Explorer supports Embedded OpenType (EOT) files before #font-face was formalized in CSS3. You can find compatible files on sites like FontSquirrel or Google's Font API. FontSquirrel's conversion tool should also help here. Also worth a read would be the latest bulletproof syntax recommended by fontspring to embedding multiple files for multiple browsers.
The fact that this wasn't used frequently until recently is two-folds; first there are legal issues with using #font-face fonts - copyrights to be specific. Unlike cufon which only retains the shape of the fonts, with #font-face you are transmitting the actual fonts themselves, which has legal implications.
The other problem is support in other browsers - Firefox 3 was the last of the modern browsers to not support #font-face in some way, so before Firefox 3.5's release in mid-2009 #font-face was still not viable. In addition to all that there are differences in format support between the browsers, so the development of the technology is slow.
Internet Explorer 9 requires an EOT type font. TTF fonts can be used in most of the other recent browser versions and SVG for devices like iPhone and iPad. You can read more about browser support for #font-face here http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
Font Squirrel is also a great resource for creating web font files including EOT from your existing font files. Please be sure you have a licence to use the fonts on the web. You can access the free web font file generator here:
http://www.fontsquirrel.com/fontface/generator
A typical CSS entry for an #font-face set looks like this:
#font-face
{
font-weight: normal;
font-style: normal;
font-family: 'custom-font';
src: url('/some/directory/custom-font.eot');
src: url('/some/directory/custom-font.eot?#iefix') format('embedded-opentype'),
url('/some/directory/custom-font.woff') format('woff'),
url('/some/directory/custom-font.ttf') format('truetype'),
url('/some/directory/custom-font.svg#webfont') format('svg');
}
Then you can call your font by assigning the "font-family" attribute using css
.my-class { font-family: "custom-font" }
You can also write:
#font-face {
font-family: 'custom-font';
src: url('/some/directory/custom-font.eot');
}
#font-face {
font-weight: normal;
font-style: normal;
font-family: 'custom-font';
src: url('/some/directory/custom-font.woff') format('woff'),
url('/some/directory/custom-font.ttf') format('truetype'),
url('/some/directory/custom-font.svg#webfont') format('svg');
}
Works as well as the example above, without using the "?" mark.
Yes they do starting with IE6*.
A working example.
The font must follow some special rules though, for example the font name must begin with the family name and the family-name in the CSS must match the family name of the font.
If you use the font squirrel webfont generator to generate an .eot from a .ttf, it will ensure the generated .eot is usable on IE6.
* Beware that there are aliasing issues with custom fonts rendering in IE6/7/8.
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.