I have purchased some fonts from myfonts.com. Due to a bug, they don't work in IE10. I'm gonna use some fallback fonts.
With webfonts, most people use default values for font-weight and font-styles and import different fonts instead. This is a problem now that I want to use fallback default fonts. I want to do somehting like this:
font-family: AvenirLT-BookOblique, Helvetica, Arial;
But setting helvtica and arial to font-style: italic. The default font is already italic.
I could make a custom css-file just for IE10, however, that's a bit of a hazzle. Are there any other options? IE10 is the only browser that needs to support this.
Demo
You can achieve desired results in IE10 with jQuery(only) or IE conditional Stylesheets for IE<9.
if ($.browser.msie && $.browser.version == 10) {
$('element').addClass('ie10');
}
.ie10{
//some css here
}
or target all versions of IE
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
Note:
$.browser.msie is deprecated in jQuery 1.9.1
Related
I've recently applied the Arimo font from Google Web Fonts. On almost all modern browsers it looks normally but in Konqueror (KDE 4.10.1) all fonts are bold and italic.
Are there any hacks, or solutions to prevent this behavior?
My <link> to the font is:
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Arimo:400,700,400italic,700italic&subset=latin,latin-ext">
Just externally define font-style: normal !important; and font-weight: normal !important; in the css where you are seeing them bold and italic in Konqueror. So it will behave same in all the browsers.
I have been working on a site for about a week now and we needed to include some none-regular fonts.
No problem there, i would just use the #font-face{} in CSS and it works like a charm. . . unless your name is Internet Explorer.
as IE only takes .eot fonts (as the only one of all the major modern browsers) i need to include a way to use the .eot format of my fonts when it is a IE browser that hits the site.
so, this is where i could use a hand.
If I use the IE conditional HTML to specify a stylesheep just for IE, how can i make sure that the browser will interpred the right #font-familiy? (assuming i am going to be useing the same font-familiy name with a different src)
//Using this
#font-face {
font-family: "ArdleysHand";
src: url(../Fonts/ArdleysHand.ttf) format("truetype");
}
//But would have to use this if IE
#font-face {
font-family: "ArdleysHand";
src: url(../Fonts/ArdleysHand.eot) format("truetype");
}
Thanks in advance
Conditional comments for stylesheet
Conditional comments only work in IE, and are thus excellently suited to give special instructions meant only for IE. They are
supported from IE 5 onwards.
<!--[if IE]>
<style type="text/css">
#import 'iestyle.css';
</style>
<![endif]-->
you can use conditional comments in your HTML file like:
<!--[if IE]> <link rel="stylesheet" type="text/css" href="ie_font.css"> <![endif]-->
for all other browsers you can use this comment:
<!--[if !IE]> <link type="text/css" href="other_font.css"> <![endif]-->
UPDATE: I've written a blog post about what I've learned about this issue. I still don't fully understand it, but hopefully someone will read this and shed some light on my issue: http://andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and-ie8
I have a page where I'm using #font-face to import a custom font for icons. The icons are created with a class:
.icon {font-family: 'icon-font';}
.icon:before {content: 'A';}
And voila, I have whatever icon is used for "A". Pretty standard stuff, works in all browsers, including IE8.
However, in IE8, I have a bizarre bug. When the page loads, the font is not working. Instead of icons, I have letters all over the place. Once I hover OVER the page (body), half the letters become icons. The rest become icons when I hover over them.
SO the font-face is embedding properly. The font-family and content properties are both working, but something else is causing the icons to load only after hover.
So there's some sort of bug with #font-face in IE8 when you try to use the font with :before{content: 'a'} but I have no idea what the bug is.
I've searched for hours on here for a similar bug/IE8 issue/anything, but I've had no luck and I'm about to go crazy. ANY suggestions?
Let me know if I can provide anymore info that might be helpful.
EDIT: Updated the broken link to the blog post.
I had the same bug.
I fixed it by executing this script on domready (only for IE8 of course):
var head = document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css';
style.styleSheet.cssText = ':before,:after{content:none !important';
head.appendChild(style);
setTimeout(function(){
head.removeChild(style);
}, 0);
This lets IE8 redraw all :before and :after pseudo elements
I recently encountered this as well, and fixed it by including the #font-face twice in my CSS file. The first #font-face is used by IE and the second is used by other browsers.
#font-face {
font-family: "SocialFoundicons";
src: url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.eot");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "SocialFoundicons";
src: url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.eot"),
url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.eot?#iefix") format("embedded-opentype"),
url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.woff") format("woff"),
url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.ttf") format("truetype"),
url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.svg#SocialFoundicons") format("svg");
font-weight: normal;
font-style: normal;
}
Source: http://www.boonex.com/n/ie8-icon-font-fix-and-unused-language-keys-2012-08-20
I was experimenting exactly the same problem. In IE8 the webfont icon (using pseudo-elements) sometimes renders the fallback font but when you hover it the webfont icon comes visible.
The icons were implemented using :after and :before with IE7 support, like this.
In my case, the project is developed in HTML5 and using htmlshiv to support the new HTML5 tags in older browsers.
The problem was ridiculously solved placing the html5shiv script tag below the main CSS:
<link rel="stylesheet" href="/stylesheets/main.css" type="text/css">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
I'm happy now :) I hope that helps!
I was having a similar issue where the font would not show up until I hovered over the parent element. I was able to fix this problem by triggering a focus event on the elements parent.
element.parent().trigger('focus');
Hope this helps someone!
Workaround:
Find stylesheet and reload on document ready if IE8:
Sample HTML:
<!DOCTYPE html>
<html>
<head>
<!-- … -->
<link id="base-css" rel="stylesheet" href="/styles.base.css" type="text/css" />
<!-- … -->
</head>
<!-- … -->
</html>
Sample JavaScript:
// Reload stylesheet on document ready if IE8
if ($.browser.msie && 8 == parseInt($.browser.version)) {
$(function() {
var $ss = $('#base-css');
$ss[0].href = $ss[0].href;
});
}
The above solutions didn't fix the issue for me when IE8 is refreshed. Also I found some problems where adding a stylesheet would break the IE8 background size fix backgroundsize.min.htc
So here's what I did:
Add ie8 class to html tag:
<!--[if IE 8 ]><html class="ie8"><![endif]-->
Add loading class to the body:
<body class='loading'>
Override the CSS content attribute only for IE8:
<style>
.ie8 .loading .icon:before {
content: '' !important;
}
</style>
Now remove the loading class on DOM ready:
$( function() {
$('body').removeClass('loading')
} );
Now it works!
Based on the answer from #ausi, you can refactor this with jQuery and CoffeeScript down to 4 lines:
$(document).ready ->
$style = $('<style type="text/css">:before,:after{content:none !important}</style>')
$('head').append $style
setTimeout (-> $style.remove()), 0
or with JavaScript syntax:
$(document).ready(function() {
var $style;
$style = $('<style type="text/css">:before,:after{content:none !important}</style>');
$('head').append($style);
return setTimeout((function() {
return $style.remove();
}), 0);
});
I had a similar glitch in Chrome. Here is my fix:
setTimeout(function(){
jQuery('head').append('<style id="fontfix">*:before,*:after{}</style>');
},100);
My guess is that the pseudo css styling was rendered before the webfont was ready, which resulted in blank glyphs. After the page loaded, hovering or altering the css in any way caused them to magically appear. So my fix just forces a css update that does nothing.
For me, the problem was simply solved using the declaration !important on the content attribute.
I.e.:
.icon:before {
content: "\f108" !important;
}
Alright, so I've been trying to fix this issue for a while.
Weirdly enough the icomoon demo kept working in IE8 but mine never did, even though I felt like I had pretty much the same thing in place. So I started boiling everything down (the icomoon demo as well as my own implementation) and what I found two things that needed to be there for this to work.
First, I found that I needed to keep the cachebuster on the filename.
So in my implementation I had:
#font-face {
font-family: 'iconFont';
src:url('icon_font.eot');
src:url('icon_font.eot') format('embedded-opentype'),
url('icon_font.woff') format('woff'),
url('icon_font.ttf') format('truetype'),
url('icon_font.svg') format('svg');
font-weight: normal;
font-style: normal;
}
But what I needed was:
#font-face {
font-family: 'iconFont';
src:url('icon_font.eot?-v9zs5u');
src:url('icon_font.eot?#iefix-v9zs5u') format('embedded-opentype'),
url('icon_font.woff?-v9zs5u') format('woff'),
url('icon_font.ttf?-v9zs5u') format('truetype'),
url('icon_font.svg?-v9zs5u#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
Second, and this one doesn't make sense, is that I needed something in the stylesheet that had a :hover pseudo selector. It doesn't matter what it's on or what the rules for it are, it just needed something and then the icons would appear when I hovered over them.
So I simply inserted [data-icon]:hover{} into my CSS stylesheet (just like that, without any rules).
I wish I could explain to you why this works, but I don't understand. My best guess is that this triggers some sort of refresh in IE8 and causes the icons to show up.
My IE8 issue was solved by removing the double-colon in the pseudo-element selector.
Does not display an icon in IE8...
.icon::before {
content: "\76";
}
Does display an icon in IE8...
.icon:before {
content: "\76";
}
Ok so here's a variation of #ausi's solution that I've used which has worked for me. This solution comes from Adam's comment at the bottom of this article http://andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and-ie8/
I thought I'd put it here in more detail to make it quicker for others to use.
Set an extra class eg. ie-loading-fix on the html tag for IE8.
Include all your CSS and then after that have a conditional JS file for IE8. For example:
<!DOCTYPE html>
<!--[if IE 8]> <html class="ie-loading-fix"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Include all your CSS before JS -->
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--[if lt IE 9]>
<script src="js/ie.js"></script>
<![endif]-->
</head>
...
Then at the top of your main CSS file include something like:
.ie-loading-fix :before,
.ie-loading-fix :after {
content: none !important;
}
Then in your IE8 js/ie.js file include the following:
window.onload = function () {
var cname = document.documentElement.className;
cname = cname.replace('ie-loading-fix', '');
document.documentElement.className = cname;
}
This JS will remove the ie-loading-fix styling which is hiding all :before and :after content and will force IE8 to redraw all :before and :after content once the page has loaded.
This solution fixed an issue I was having with Font Awesome v4.4 which would frequently switch IE8 into Compatibility View or crash even though I was explicitly setting the page to load in Edge mode using the meta tag.
If I am not wrong then IE doesn't reads TTF font, it requires EOT fonts
I did some research as per #vieron answer and it turns out that another way to fix this problem is to block page rendering for a few miliseconds so font could be loaded before content. Though, blocking page rendering isn't smartest way to solve this, because you can't know how much ms you should block.
I proved it by putting php file as source file for javascript.
<!--[if lt IE 9]>
<script src="/block.php"></script>
<![endif]-->
block.php
<?php
usleep(200000);
?>
If you have any external javascript libraries such as HTML5shiv, this happens automagically, except you are running site on local network (intranet or localhost) with very low latency and no scripts before content.
That explains the fact that the problem isn't more widespreaded and noticed.
I really tried hard to find an elegant solution, but I can't find something that excludes javascript or blocking page rendering for IE.
This is the fix, we have faced this issue with IE7, IE8 and IE9 when using ajax
setInterval(function(){
var $ss = $('#base-css');
$ss[0].href = $ss[0].href;
},300);
I've to implement custom font in a website, What should be used. Client is providing custom fonts.
All browser support (Including IE6 and in all A Grade Browsers)
text Selectable
Selection visible
Accessible with screen reader
Successfully degradable if JS is
disabled
Easy to implement and manage in less time
Mobile browser compatible
less performance issue
No purchase needed
Can be used as a link also
Font should look smooth like in
Photoshop
or is there any other better and free solution which has all these things?
Why not just use the bulletproof #font-face syntax as described by Paul Irish and back it up with alternate styles and javascript in conditional IE tags?
IE:
<style type="text/css">
...
#font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('Graublau Web Regular'), local('Graublau Web'),
url('GraublauWeb.otf') format('opentype');
}
...
</style>
<!--[if lte IE 6]>
<link type="text/css" rel="stylesheet" href="ie_6styles.css" />
<script type="text/javascript" src="Cufon.js"></script>
<script type="text/javascript">
Cufon.init();
</script>
<![endif]-->
The only part of your requirements that is not met by this setup right off the bat is mobile compatibility across the board. Once you determine what platforms you want to support, this solution should be extensible enough to allow support for all of them as well.
If I were you id use #font-face and deliver a javascript solution (like cufón) to the older browsers.
use fontsquirrel
and a javascript filter
#font-face does not support IE6 as good as you would want it to. So if that is your requirement, don't use it.
Browser consistency is also a big problem with #font-face
I think you'd be better served to consider using images with Alt tags selectively, and relying on good usage and tasteful standard fonts.
The idea in the following is the first #font-face is for Firefox, the second for IE, and Arial for anything else that can't make sense of the first two. Its all working except for I want to give a different size in the case of Arial, and haven't figured out the syntax to do that.
#font-face {
font-family: Tribeca;
src: url("Tribeca.ttf"); format("truetype");
}
#font-face {
font-family: TribecaIE;
src: url("Tribec0.eot");
}
BODY
{
FONT-FAMILY: Tribeca, TribecaIE, Arial; font-size: 195%;
}
I don't believe this is possible with css alone; we will probably need to use javascript.
All we want to do is specify a different font-size if Arial is the active font. Detecting the active font is not exactly straightforward, but here is one method that will work for our particular purpose. We can create a temporary element containing some Arial characters and measure its width, and then create a second element containing characters without specifying a font (so that it defaults to the "active" font) and compare widths. This won't tell us which font is currently active, but can indicate whether or not one of the embedded fonts was loaded with #font-face as they certainly won't have the same width as Arial. If the two elements' widths aren't equal we know that Arial could not have loaded, and so we will only adjust the font-size if the widths are equal.
Even if the browser is unable to load the Arial font, our test is still functional, because when we specify Arial during the test, the browser will default to the same font as it would for the second element. Both elements will still have equal width if the browser is unable to load the embedded fonts with #font-face.
If anyone would like me to further illustrate with code, I'll be happy to write the javascript.
This is not supported by normal CSS rules..
I believe your options are
the font-size-adjust property of css 3
javascript (jQuery), and check for current font to see which one of the three is effective and adjust the font-size accordingly.. http://www.w3.org/TR/css3-fonts/#font-size-adjust ( you should also have a look at the http://www.modernizr.com/ )
I believe it is this (close to what you have):
#font-face {
font-family: Tribeca;
src: url("Tribeca.ttf");
}
#font-face {
font-family: Tribeca;
src: url("Tribeca.eot");
}
body {
font-family: Tribeca, Arial;
}
IE won't know how to open the ttf, so it won't bother. Then it will open the eot. Then, you just specify the font by the given name in the body declaration.
Target your browsers by knowing which one reads which type of declaration.
Conditional Comment load different CSS calls.
Then you can specifically tell each one to do something different per rule.
Also there is typekit
#font-face {
font-family: 'Tribeca';
src: url(Tribeca.eot);
src: local('Tribeca'), url(Tribeca.ttf) format('truetype');
}
MSIE will ignore the last line cos it doesn't understand format rule. and yes as pointed by porneL above, format() should go in the src property.
local() will make supporting browsers use local font file if user has it instead of downloading from your server (and probably make IE ignore the line too).
as for the font-size adjustment, as pointed by Gaby: CSS 3 font-size-adjust. but it looks like it's not widely supported, yet.
To void code duplication with #font-face, you can do this via server side. If you use for example some urlrewrite, detect UA, if it's IE - return file with .eot extension, if it's normal browser - ttf.
As for me, it works great.
And for this case, you shouldn't change your css files, just should have 2 files: .ttf & .oet.
Although it's against normal good-practices when using CSS, you could use the !important declaration in your conditional CSS.
As an example, we create two stylesheets: the 'default' one, which will have a section for Firefox-specific styles and an Internet Explorer stylesheet.
Then, using the standard <link rel="" /> method of importing stylesheets:
<link rel="stylesheet" href="normal/css/file.css" type="text/css" media="screen, projection">
<!--[if IE]><link rel="stylesheet" href="http://mysite.com/path/to/ie6.css" type="text/css" media="screen, projection"><![endif]-->
Within the 'default' stylesheet, our Firefox styles are wrapped in the following:
#-moz-document url-prefix() {
#my-id { font-size: 100%; }
}
This works because the #-moz-document url-prefix() section is how Firefox addons style webpages. So, other browsers don't understand it and therefore just skip it.
BODY
{
FONT: 140% Arial;
FONT: 195% Tribeca,TribecaIE;
}