#font-face {
font-family: "England Hand";
src: url("fonts/englandhand.eot?#iefix") format("embedded-opentype"),url("fonts/englandhand.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
I have the above as the font style. Its included in the body of the page. I have not added the font family to a div and it renders there ohk. When I create a clone of this div and assign it another position and id, the font stops rendering.
There is also no error in the console. This error only occurs on IE 8 and works fine on IE 9 .
SOLUTION
Look out for js errors. Surely there will be one in there leading to the issue
I think your missing some prefixes for the ie8/ie9 support. Your code needs to look something like:
#font-face {
font-family: 'deutsch_gothicnormal';
src: url('deutsch-webfont.eot');
src: url('deutsch-webfont.eot?#iefix') format('embedded-opentype'),
url('deutsch-webfont.woff') format('woff'),
url('deutsch-webfont.ttf') format('truetype'),
url('deutsch-webfont.svg#deutsch_gothicnormal') format('svg');
font-weight: normal;
font-style: normal;
}
Related
I've found strange problem on my site.
If add font in style like
font: 2.0625em/1em 'ColiseumCRoman';
it doesn't work in FF (28.0 version and in 29.0.1 the same problem)
Does not work neither the size nor the line-height nor the font. Caption is displayed by the default font.
but if I change style like
font-size: 2.0625em;
line-height: 1em;
font-family: 'ColiseumCRoman';
it works absolutely correct in FF!
I don't understand why! What's going on ?
PS. I use #font-face for adding this font
#font-face { /*ColiseumC*/
font-family: 'ColiseumCRoman';
src: url('../fonts/coliseumc.eot');
src: url('../fonts/coliseumc.eot') format('embedded-opentype'),
url('../fonts/coliseumc.woff') format('woff'),
url('../fonts/coliseumc.ttf') format('truetype'),
url('../fonts/coliseumc.svg#ColiseumCRoman') format('svg');
font-weight: normal;
font-style: normal;
}
Here is the website in question: https://www.cocokeyorlando.com
IE8 is not rendering my custom font-faces when I first go to the page. There are two font-faces that should be loading for the slider text. If I reload/refresh the page nothing changes.
However, when I click on the logo to go back to the homepage, they start working.
Here is the code I am using to load them.
#font-face {
font-family: 'neoretrodrawregular';
src: url('fonts/NEORD.eot');
src: url('fonts/NEORD.eot?#iefix') format('embedded-opentype'),
url('fonts/NEORD___-webfont.woff') format('woff'),
url('fonts/NEORD___-webfont.ttf') format('truetype'),
url('fonts/NEORD___-webfont.svg#neoretrodrawregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'blackjackregular';
src: url('fonts/black_jack.eot');
src: url('fonts/black_jack.eot?#iefix') format('embedded-opentype'),
url('fonts/black_jack-webfont.woff') format('woff'),
url('fonts/black_jack-webfont.ttf') format('truetype'),
url('fonts/black_jack-webfont.svg#blackjackregular') format('svg');
font-weight: normal;
font-style: normal;
}
Any help is greatly appreciated!
Make sure you fonts/black_jack.eot file is there, and the CSS is all correct.
The site is not rendering well in IE11, or in IE8 mode. The site works fine in Chrome.
Check out these...
Font Face not working in IE8 as expected
I'm having a hard time making a font look properly in the major browsers (I'm only using the Windows versions BTW for now, don't have access to Mac), I'll try to mention the code and how it behaves with each change I did to the SVG line because that's what most people suggest changing after doing some research about similar issues.
#font-face {
font-family: 'RobotoLight';
src: url('../font/jura-demibold.eot');
src: url('../font/jura-demibold.eot?#iefix') format('embedded-opentype'),
url('../font/jura-demibold.woff') format('woff'),
url('../font/jura-demibold.ttf') format('truetype'),
url('../font/jura-demibold.svg#RobotoLight') format('svg');
font-weight: normal;
font-style: normal; }
This code makes the font look very pixelated in:
Google Chrome and Safari
However it looks fine in FireFox and IE.
This is the 2nd code (I bumped up the SVG line):
#font-face {
font-family: 'RobotoLight';
src: url('../font/jura-demibold.eot');
src: url('../font/jura-demibold.eot?#iefix') format('embedded-opentype'),
url('../font/jura-demibold.svg#RobotoLight') format('svg');
url('../font/jura-demibold.woff') format('woff'),
url('../font/jura-demibold.ttf') format('truetype'),
font-weight: normal;
font-style: normal; }
Font isn't even displayed anymore and is replaced by a default webfont in:
FireFox, Chrome and Safari
Still looks normal in IE.
Finally, when I remove the "#RobotoLight" from the SVG line, like this:
#font-face {
font-family: 'RobotoLight';
src: url('../font/jura-demibold.eot');
src: url('../font/jura-demibold.eot?#iefix') format('embedded-opentype'),
url('../font/jura-demibold.svg') format('svg');
url('../font/jura-demibold.woff') format('woff'),
url('../font/jura-demibold.ttf') format('truetype'),
font-weight: normal;
font-style: normal; }
Font still isn't displayed in FireFox, but it now works properly (without Pixelation) in Chrome, Safari and IE!
So can someone help me make the 3rd code work with FireFox as well please, cross browser font compatibility is driving me insane.
ps: I'm not an experienced developer and still new to this, I bought a ready template that I'm trying to change some stuff in it to create a basic website for myself, I'm not sure if this matters but I didn't change the font-family name in the CSS sheet, I added the fonts in the proper folder and edited the SRC URL to the right path.
I assume the font-family name is for my own reference in the CSS sheet and browsers don't actually verify it.
Any help would be MUCH appreciated!
You have a comma and a semicolon mixed up. The correct block would be:
#font-face {
font-family: 'RobotoLight';
src: url('../font/jura-demibold.eot');
src: url('../font/jura-demibold.eot?#iefix') format('embedded-opentype'),
url('../font/jura-demibold.svg') format('svg'),
url('../font/jura-demibold.woff') format('woff'),
url('../font/jura-demibold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
change
url('../font/jura-demibold.svg') format('svg');
to
url('../font/jura-demibold.svg') format('svg'),
EDIT: These little mistakes happen to the best of us.
Due to specific client requirements, I need to use IE8 as the main browser for a website, for which they require that a custom font of their own be used on the page headings. H1's to be more precise.
The problem I'm having is that on exactly the same page (whatever the page), the heading is sometimes correctly rendered using the custom font, but other times IE8 messes up the text and apparently applies the fallback font.
Bellow are two screenshots, one with the font correctly applied, one with it not being applied:
Good font:
Bad font:
I have the following stylesheet where I define the rules for that custom font. I apologize in advance, but I cannot make the name of the font public (NDA in effect).
#font-face {
font-family: 'secretfont_exbregular';
src: url('../fonts/secretfontexbd-webfont.eot');
src: url('../fonts/secretfontexbd-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/secretfontexbd-webfont.woff') format('woff'),
url('../fonts/secretfontexbd-webfont.ttf') format('truetype'),
url('../fonts/secretfontexbd-webfont.svg#secretfont_exbregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'secretfont_ltregular';
src: url('../fonts/secretfontlt-webfont.eot');
src: url('../fonts/secretfontlt-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/secretfontlt-webfont.woff') format('woff'),
url('../fonts/secretfontlt-webfont.ttf') format('truetype'),
url('../fonts/secretfontlt-webfont.svg#secretfont_ltregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'secretfont_rgregular';
src: url('../fonts/secretfontrg-webfont.eot');
src: url('../fonts/secretfontrg-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/secretfontrg-webfont.woff') format('woff'),
url('../fonts/secretfontrg-webfont.ttf') format('truetype'),
url('../fonts/secretfontrg-webfont.svg#secretfont_rgregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'secretfont_rgbold';
src: url('../fonts/secretfontrgbd-webfont.eot');
src: url('../fonts/secretfontrgbd-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/secretfontrgbd-webfont.woff') format('woff'),
url('../fonts/secretfontrgbd-webfont.ttf') format('truetype'),
url('../fonts/secretfontrgbd-webfont.svg#secretfont_rgbold') format('svg');
font-weight: normal;
font-style: normal;
}
And the stylesheet where I set the font-family for the headings:
h1 {
color: #E60000;
font-family: 'secretfont_ltregular', Arial, Helvetica, sans-serif;
font-size: 36px;
}
I've tried everything I could think of but can't seem to get a consistent behavior out of IE8. What can I do to make it work as it should?
I had a similar issue - all EOT files were being successfully loaded by IE8 but only sporadically applied. After a lot of frustration the only thing that seemed to work is adding the chrome frame meta tag just below the tag:
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1" />
Be aware that chrome frame stops being supported January 2014 http://www.chromium.org/developers/how-tos/chrome-frame-getting-started
The webpage where I'm trying to get the custom font "Duke-Fill" to display is http://www.hamlinforcongress.com/helpout.php
I'm using:
#font-face {
font-family: 'header_font';
src: url('Duke-Fill.eot?#iefix') format('embedded-opentype'),
url('Duke-Fill.woff') format('woff'),
url('Duke-Fill.ttf') format('truetype'),
url('Duke-Fill.svg#svgFontName') format('svg');
}
.header_font{
font-family: header_font;
}
I've tried every other suggestion I can find on the Internet, but nothing can make the custom font display in Internet Explorer. It works perfectly in every other conceivable browser, but not IE (surprise surprise). Help?
#font-face {
font-family: 'NimbusSanConD-Lig';
src: url('fonts/228BFB_1_0.eot');
src: url('fonts/228BFB_1_0.eot?#iefix') format('embedded-opentype'),
url('fonts/228BFB_0_0.woff') format('woff'),
url('fonts/228BFB_0_0.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
This code works in IE. It was generated using Font Squirrel