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]-->
Related
I am just getting started with Font Awesome and I must be doing something wrong with referencing files in the package. Icons are not showing up with <i class="icon-music"></i> for example.
The following is the default css except that I changed the file path to adhere my structure.
#font-face {
src: url('../Font/fontawesome-webfont.eot?v=3.2.1');
src: url('../Font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../Font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../Font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../Font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
}
Relative path should be correct with all the font types inside Font folder and this folder sits on the same level with Contentfolder that has the stylesheet.
Is the query string appended to font names in the stylesheet for checking browsers? If so, what I done on html page with ie7 conditional comment should be invalid.
<link rel="stylesheet" media="all" href="#Url.Content("~/Content/font-awesome.css")" />
<!--[if IE 7]>
<link rel="stylesheet" media="all" href="#Url.Content("~/Content/font-awesome-ie7.css")" />
<![endif]-->
Should I remove the query string after the font names in the stylesheet and keep the ie7 conditional statement instead or vice versa? or is it something else that you see causing problem?
Your code for the html is not correct this is the right code
<link rel="stylesheet" media="all" href="~/Content/font-awesome.css" type="text/css" />
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
Good day,
I want to apply two different CSS codes to fix some font-rendering issue (faux bold) in IE8, the latter cannot recognize all the font-family if they've got the same name, instead it only recognize the first font-family, so i'm attempting to use conditional comments to fix that :
First code is for older versions of IE (including IE8) :
<!--[if lte IE 8]>
<link href="IE8fonts.css" rel="stylesheet" type="text/css">
<![endif]-->
Second one is for IE9, IE10 and all non-IE browsers (Chrome, Firefox, Opera, Safari...), none of them has this faux bold issue :
<!--[if IE 9 | !IE]><!-->
<link href="fonts.css" rel="stylesheet" type="text/css">
<!--<![endif]-->
I know the first code is correct (or maybe not :p) , so i want to know if the second is correct too, because i don't get what i expect when i change compatibility mode in IE, certainly there is something wrong in the condition [if IE 9 | !IE]
I also want to know the correct order (if there is one) to put those two conditional comments.
Please help me with this because i'm kind a newbie in anything related to compatibility :/
You could apply the css for IE9+ and other browsers first, and then apply the conditional comment for IE8 or less, so the rules for font-family in fonts.css would be overridden by the rules in IE8fonts.css, if the browser is less than or equal to IE8. This way you can avoid complex and unnecessary conditional comments.
<link href="fonts.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]>
<link href="IE8fonts.css" rel="stylesheet" type="text/css">
<![endif]-->
Hope it helps.
Conditional comments are an IE specific feature. Other browsers just treat them as normal comments. Remember that an HTML comment starts with <!-- and ends with -->. Hence <!--[anything]> is the beginning of a normal comment, and non-IE user-agent will ignore anything after that until the next occurence of -->. On the other hand <!--[anything]><!--> is a full comment and non-IE browsers will process whatever is after that.
So I suggest you use:
<!--[if gte IE 9]><!-->
<link href="fonts.css" rel="stylesheet" type="text/css">
<!--<![endif]-->
From the point of view of a regular HTML parser (non-IE), this is two regular comments enclosing a link element.
So IE9 spits out an error on using a google fonts include like the following:
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet" type="text/css" />
IE9 spits out an error, even though the fonts still load fine:
CSS3111: #font-face encountered unknown error.
I'd gladly ignore this error if I weren't writing content that is iframed on other people's webpages. :(
Hosting the EOT files locally resolves the issue for IE:
< !--[if IE 9]>
< link rel="stylesheet" href="/survey/css/lato-ie.css" type="text/css" />
< ![endif]-->
And in that file..
#font-face {
font-family: "Lato";
font-style: normal;
font-weight: 400;
src: url("/Lato-Reg-webfont.eot") format("embedded-opentype");
}
#font-face {
font-family: "Lato";
font-style: normal;
font-weight: 900;
src: url("/Lato-Bla-webfont.eot") format("embedded-opentype");
}
Include it in IE9, error's gone, works great.
Now my problem is, I need to include the google font stylesheet for everyone but IE9. For example, I can't do:
< !--[if !IE 9]>
< link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet" type="text/css" />
< ![endif]-->
Or firefox won't even see the damn include.
Are IE's devs conspiring to waste all of our time?
You were on the right track, you just need to use a downlevel-revealed conditional comment: it will hide it from IE but will be picked up by other browsers.
One question, are you trying to view your files locally?
The google fonts doesnt render locally, even thou they are linked to absolute outside links. (In case of IEs)
localhost/project/index.html = good
C:\Project\index.html = bad
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.