I'm importing a font with CSS. However, it does not seem to work in IE. I don't know why.
Here's my CSS code:
#font-face {
font-family: 'bello';
src: url('../fonts/bello.eot?');
src: url('../fonts/bello.eot?#iefix') format('embedded-opentype'),
url('../fonts/bello.woff') format('woff'),
url('../fonts/bello.ttf') format('truetype'),
url('../fonts/bello.svg#bello') format('svg');
font-weight: normal;
font-style: normal;
}
.bello {
font-family: "bello", Verdana, Tahoma;
}
I've added .eot, .svg, .woff, .ttf and .otf to the folder fonts. It displays correctly in all browsers except IE. To create the .eot file I used this site: http://www.kirsle.net/wizards/ttf2eot.cgi.
I have no idea why it's not working. Any help would be great. Thanks!
solved the problem, it was not problem of the eot file. It seems IE has a problem finding the .eot file if the family name is different as the full name of the font. In my case font name was bello-script and font family was bello. Changed both of them and everything worked fine.
I was experiencing a similar issue. As with the other response it didn't appear to be a problem with the .eot file but rather with the font-family value length.
Changing the #font-face and references of:
font-family: Titillium Web Extra Light Italic
To:
font-family: Titillium Web Light Italic
Fixed it for me. Always expect IE to fall over for absolutely any reason...
Related
Sorry if this is a stupid question but I imported a font stored on my computer into a CSS file and, although it works in Chrome, it doesn't in Microsoft Edge or Internet Explorer. I don't have any other browsers so I can't check with those and I was wondering if anyone would know why.
Linking CSS:
#font-face {
font-family: 'Linotte';
src: url('...\font\Linotte\Linotte.otf') format('otf'),
url('...\font\Linotte\Linotte.woff2') format('woff2'),
url('...\font\Linotte\Linotte.woff') format('woff');
font-weight: normal;
font-style: normal;
}
I read that Edge doesn't have .woff2 support, so I figured linking both the .otf and .woff versions would help, but it hasn't. I get the following error in my Chrome console on any page that uses this font for both the .woff and .woff2:
Failed to load resource: net::ERR_FILE_NOT_FOUND
However, that error doesn't show up in the Edge console or the IE console.
When I go into sources, this is what shows up (won't let me imbed images yet, I'm very new): Sources
The folder the Linotte folder is in is in the same folder as the folder the CSS sheet is in, so I don't understand why it isn't showing the right thing.
Try replacing the three ... with ..:
#font-face {
font-family: 'Linotte';
src: url('..\font\Linotte\Linotte.otf') format('otf'),
url('..\font\Linotte\Linotte.woff2') format('woff2'),
url('..\font\Linotte\Linotte.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Also the convention is to use forward slashes, not backward.
I have create custom font family for a font named "Edwardian-Script-ICT". I download the "ttf" formate and convert it by a online font converter Everything Fonts.
Here is my CSS code.
#font-face{
font-family: "Edwardian-Script";
src: url('font/Edwardian-Script-ITC.eot') format('embedded-opentype');
src: url('font/Edwardian-Script-ITC.woff') format('woff'),
url('font/Edwardian-Script-ITC.ttf') format('truetype'),
url('font/Edwardian-Script-ITC.svg') format('svg')
}
h1{
font-family:'Edwardian-Script',sans-serif;
font-size: 60px;
font-wight: normal;
}
And here is my css folder structure.
css
-font
-Edwardian-Script-ITC.eot
-Edwardian-Script-ITC.svg
-Edwardian-Script-ITC.ttf
-Edwardian-Script-ITC.woff
-style.css
The font works fine for some days. But after 10-15 days the font don't work and it fallback to normal font. But when I clear my recent browser history it appears again. I don't understand what is the problem. Can anybody help me ?
#font-face {
font-family: iconFont;
src: local(iconFont), url('fonts/iconFont.ttf') format('opentype');
}
The font file is not corrupt and installs fine in OSX etc. letting me preview it. But it won't render anything when I try to use it on a web page or even if I select it in illustrator it just switches to another font if I touch any key.
The font is for 'regular' and I have tried other options, but it won't work. Have tried typing with caps on/off etc. Using numpad, nothing. Have re-installed it and made sure there are no duplicates. It also won't work in Windows. Not sure if I need to change my css somehow or the fault lays with the font.
Here's a link to the font for anyone wanting to try. It's a bunch of metro icons. http://www2.zippyshare.com/v/23494573/file.html
Not sure if this will help, but this is the CSS I use, and it works fine. The webfonts directory is in the same directory as the css file, and includes three file types: .eot .ttf .woff
#font-face {
font-family: 'AvenirLT-Book';
src: url('webfonts/25EE2B_0_0.eot');
src: url('webfonts/25EE2B_0_0.eot?#iefix') format('embedded-opentype'), url('webfonts/25EE2B_0_0.woff') format('woff'), url('webfonts/25EE2B_0_0.ttf') format('truetype');
}
a typical class decleration:
.AvenirLT-Book {
font-family: AvenirLT-Book;
font-weight: normal;
font-style: normal;
}
perhaps you need to change the format to ('truetype') instead of ('opentype') ?
I have a problem with font-face in mozilla browser and chrome.
Actually, I use font-face and its working fine, but this is a first time i use font-face with font : Penshurst and its not working. When i using another font is working fine.
This is my font-face code :
#font-face{
font-family:Penshurst;
src:url("../../plugin/font/penshurst.ttf"),url("../../plugin/font/penshurst.eot");
}
#font-face{
font-family:Century Regular;
src:url("../../plugin/font/century gothic regular.ttf"),url("../../plugin/font/century gothic regular.eot");
}
For font face with font: Century Regular, it's working fine, but for Penshurst its not working.
Any suggestion for this problem?
Thx
Here is the correct format:
#font-face {font-family: 'Penshurst';
src: url('../../plugin/font/penshurst.eot');
src: url('../../plugin/font/penshurst.eot?#iefix') format('embedded-opentype')? /* if needed for IE */,
url('../../plugin/font/penshurst.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
Also...
you might need this:
`url('../../plugin/font/penshurst.woff') format('woff'),`
...you might have to convert to get this...(see my link on my comment below)
Make sure your server IIS has MIME Type for .eot/.otf/.ttf/.woff so that way you can preview them locally or online(server)...and lastly even though you can see Century Regular doesn't mean that Penshurst in your server/localhost
:)
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/