I have been pondering for quite some time on what causes some IE versions to render #font-face fonts as italic, even though the styles are declared as normal.
My main thought is that IE won't download every font-file before rendering the page.
In my CSS I have declared font files for different typefaces of the same font - ranging from thin italic to ultra. They are all declared using the same setup:
#font-face { /* THIN ITALIC */
font-family: Unit;
src: url("../gfx/fonts/UnitWeb-ThinIta.eot")
src: url("../gfx/fonts/UnitWeb-ThinIta.eot?#iefix") format("embedded-opentype"),
url("../gfx/fonts/UnitWeb-ThinIta.woff") format("woff");
font-weight: 100;
font-style: italic, oblique;
font-variant: normal;
}
through
#font-face { /* ULTRA */
font-family: Unit;
src: url("../gfx/fonts/UnitWeb-Ultra.eot");
src: url("../gfx/fonts/UnitWeb-Ultra.eot?#iefix") format("embedded-opentype"),
url("../gfx/fonts/UnitWeb-Ultra.woff") format("woff");
font-weight: 900;
font-style: normal;
font-variant: normal;
}
As you can see, italics are declared as font-style: italic, oblique;, while normal is declared as font-style: normal;.
Now, to the rendering.
This is how IE 9 renders it
This is how IE 8 renders it every now and then
Posted as answer is this SO question: Custom font sometimes renders in italics in IE8 / IE7
You need to create a custom name for each of your #font-face font-family. e.g.
#font-face { /* THIN ITALIC */
font-family: UnitItalic;
src: url("../gfx/fonts/UnitWeb-ThinIta.eot")
src: url("../gfx/fonts/UnitWeb-ThinIta.eot?#iefix") format("embedded-opentype"),
url("../gfx/fonts/UnitWeb-ThinIta.woff") format("woff");
font-weight: 100;
font-style: italic, oblique;
font-variant: normal;
}
#font-face { /* THIN ITALIC */
font-family: UnitNormal;
src: url("../gfx/fonts/UnitWeb-ThinIta.eot")
src: url("../gfx/fonts/UnitWeb-ThinIta.eot?#iefix") format("embedded-opentype"),
url("../gfx/fonts/UnitWeb-ThinIta.woff") format("woff");
font-weight: 100;
font-style: italic, oblique;
font-variant: normal;
}
Related
For example the Victor Mono font has vastly different (ie. properly designed) Italic and Oblique styles, and I'm using it as my prefered programming font, however I can't seem to make it properly show both styles at the same time in code editors/text processors or on a webpage.
When I installed the font on my local system, both Italic and Oblique shows the Italic variant, I figured it might be an issue with the OS font system, so I tried to embed the fonts with CSS like this
#font-face {
font-family: 'Victor Mono';
src: url('VictorMono-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Victor Mono';
src: url('VictorMono-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'Victor Mono';
src: url('VictorMono-Oblique.ttf') format('truetype');
font-weight: normal;
font-style: oblique;
}
but now both
html {font-family:Victor Mono; font-weight:normal; font-style: italic;}
and
html {font-family:Victor Mono; font-weight:normal; font-style: oblique;}
shows the Oblique style. While if I re-order the #font-face rules to put the Italic one below the Oblique one like this
#font-face {
font-family: 'Victor Mono';
src: url('VictorMono-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Victor Mono';
src: url('VictorMono-Oblique.ttf') format('truetype');
font-weight: normal;
font-style: oblique;
}
#font-face {
font-family: 'Victor Mono';
src: url('VictorMono-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
both Italic and Oblique styles will show the Italic variant. So it seems font-style: italic and font-style: oblique are actually interpreted as the same rule by the render engine and the rule appears later will override the former one?
So how should I show different italic and oblique font styles? For example I'd like VSCode to show comments in Italic style while reserved keywords in Oblique style. Currently it shows Italic all the time for both comments and reserved keywords which hurts my eyes when I look through the code.
I think its beacause of same font-family name, try this out:
#font-face {
font-family: 'Victor Mono Normal';
src: url('VictorMono-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;}
#font-face {
font-family: 'Victor Mono Oblique';
src: url('VictorMono-Oblique.ttf') format('truetype');
font-weight: normal;
font-style: oblique;}
#font-face {
font-family: 'Victor Mono Italic';
src: url('VictorMono-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;}
The dist css in the Github repo only links the italic version - I've seen issues when oblique is referenced in this way, so that may be causing problems. The demo site's css declares them separately like Fahim Khan's answer mentions, so that may be what you have to do if you want to reference them separately.
I'm not sure the designer intended for you to be able to use the three styles together like that, or how it would be done - the example code only uses the normal and italic together. IIRC, most editors have a separate bold font setting you can set to a different font - this may be how they're combining them in their editor, by setting that to the italic version.
Edit: this problem is specific to pseudo element inclusions of Font Awesome, <i class="fas fa-spray-can"></i> works fine. However,
#menu-item-3218 a:before{
content:'\f5bd';
font-family:'FontAwesome';
display:inline-block!important;
padding-right:6px;
vertical-align:-5%;
font-size:90%;
font-weight:normal;
}
does not work.
However, to thicken the plot, that pseudo-element inclusion does work for font-family: "fa5-brands", but not for font-family: "FontAwesome".
As you can see, the font icons do not load for font-family: "FontAwesome" (box placeholders appear instead) but do load for font-family: "fa5-brands" (the PS4 icon, etc.) and font-family: 'Rajdhani' (the text font you see):
In Chrome developer panel, fonts appear to be loading, I guess?
Location of CSS stylesheet:
Location of fonts:
I can't find any error in my implementation of #font-face in the css stylesheet on my WordPress website. Can someone see something wrong that I can't?
Relevant content in CSS stylesheet:
#font-face {
font-family: 'Rajdhani';
src: url('./assets/fonts/Rajdhani/rajdhani-regular-webfont.svg#rajdhaniregular') format('svg'), url('./assets/fonts/Rajdhani/rajdhani-regular-webfont.woff') format('woff'), url('./assets/fonts/Rajdhani/rajdhani-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "fa5-brands";
src: url('./assets/fonts/fontawesome-free-5-2-0-web/webfonts/fa-brands-400.svg#fontawesome-free') format('svg'), url('./assets/fonts/fontawesome-free-5-2-0-web/webfonts/fa-brands-400.woff2') format('woff2'), url('./assets/fonts/fontawesome-free-5-2-0-web/webfonts/fa-brands-400.woff') format('woff'), url('./assets/fonts/fontawesome-free-5-2-0-web/webfonts/fa-brands-400.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "FontAwesome";
src: url('./assets/fonts/fontawesome-free-5-2-0-web/webfonts/fa-regular-400.svg#fontawesome-free') format('svg'), url('./assets/fonts/fontawesome-free-5-2-0-web/webfonts/fa-regular-400.woff2') format('woff2'), url('./assets/fonts/fontawesome-free-5-2-0-web/webfonts/fa-regular-400.woff') format('woff'), url('./assets/fonts/fontawesome-free-5-2-0-web/webfonts/fa-regular-400.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I'm trying to get Titillium-Wen, a Google Font, to work on all broswers. I prefer to self-host the font files.
The following code works well on Edge, Safari and Chrome, but not on IE 11. Text is displayed in a backup font as if IE 11 can not find the font:
#font-face {
font-family: 'Titillium Web';
src: url('/fonts/titillium/TitilliumWeb-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: 'Titillium Web';
src: url('/fonts/titillium/TitilliumWeb-Italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}
#font-face {
font-family: 'Titillium Web';
src: url('/fonts/titillium/TitilliumWeb-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
#font-face {
font-family: 'Titillium Web';
src: url('/fonts/titillium/TitilliumWeb-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
The code below works on IE 11 but does not provide bold and italic fonts in Chrome. And anyway, I prefer to host the fonts myself:
#import url(https://fonts.googleapis.com/css?family=Titillium+Web);
Can I get the #font-face code to work on IE 11?
Try to use different font formats, as not all browsers support TTF.
#font-face{
font-family:'My Font';
src:url('../fonts/myfont.woff2') format('woff2'),
url('../fonts/myfont.woff') format('woff'),
url('../fonts/myfont.ttf') format('truetype');
font-weight:normal;
font-style:normal;
}
There are web services that will convert the font to different file formats for you. As far as I am concerned, using WOFF2, WOFF and TT covers all the browser versions I need to support.
I downloaded a free font in two kings of regular and bold. and with these format: svg,eot,ttf, woff. These fonts are working well for IE. but they don't work in firefox.
1. I want to know which format is used for which web browser.
2. Please help me solve this probelm:
#font-face {
font-family: "Nazanin";
src: url("../font/nazanin.eot");
src: local("B Nazanin"),
url("../font/nazanin.eot?#iefix") format('embedded-opentype'),
url("../font/nazanin.woff") format("woff"),
url("../font/nazanin.ttf") format("truetype"),
url('../font/nazanin.svg') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Nazanin";
src: url("../font/nazaninbold.eot");
src: local("B Nazanin bold"),
url("../font/nazaninbold.eot?#iefix") format('embedded-opentype'),
url("../font/nazaninbold.woff") format("woff"),
url("../font/nazaninbold.ttf") format("truetype"),
url('../font/nazaninbold.svg') format('svg');
font-weight: bold;
font-style: normal;
}
by the way. I know the file of the fonts work correctly.
So you have correctly declared your font face. You need a class to be able to use it in your site. So your css file should look like this:
mycustomfont {
font-family: 'Nazanin';
font-style: normal;\* or bold whatever you need *\
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Then in the HTML:
<div class="mycustomfont">Testing font</div>
Hope this gives you an idea....
On our site we have a few fonts. I embed them like this
#font-face {
font-family: "Calibri Light";
src: url("fonts/calibri/light/calibri-light.eot?") format("eot"),
url("fonts/calibri/light/calibri-light.woff") format("woff"),
url("fonts/calibri/light/calibri-light.ttf") format("truetype"),
url("fonts/calibri/light/calibri-light.svg") format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Calibri";
src: url("fonts/calibri/regular/calibri.eot?") format("eot"),
url("fonts/calibri/regular/calibri.woff") format("woff"),
url("fonts/calibri/regular/calibri.ttf") format("truetype"),
url("fonts/calibri/regular/calibri.svg") format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Calibri Bold";
src: url("fonts/calibri/bold/calibri-bold.eot?") format("eot"),
url("fonts/calibri/bold/calibri-bold.woff") format("woff"),
url("fonts/calibri/bold/calibri-bold.ttf") format("truetype"),
url("fonts/calibri/bold/calibri-bold.svg") format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Caviar Dreams";
src: url("fonts/caviar-dreams/regular/caviar-dreams.eot?") format("eot"),
url("fonts/caviar-dreams/regular/caviar-dreams.woff") format("woff"),
url("fonts/caviar-dreams/regular/caviar-dreams.ttf") format("truetype"),
url("fonts/caviar-dreams/regular/caviar-dreams.svg") format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Caviar Dreams Bold";
src: url("fonts/caviar-dreams/bold/caviar-dreams-bold.eot?") format("eot"),
url("fonts/caviar-dreams/bold/caviar-dreams-bold.woff") format("woff"),
url("fonts/caviar-dreams/bold/caviar-dreams-bold.ttf") format("truetype"),
url("fonts/caviar-dreams/bold/caviar-dreams-bold.svg") format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "TeX Gyre Adventor";
src: url("fonts/tex-gyre-adventor/regular/tex-gyre-adventor.eot?") format("eot"),
url("fonts/tex-gyre-adventor/regular/tex-gyre-adventor.woff") format("woff"),
url("fonts/tex-gyre-adventor/regular/tex-gyre-adventor.ttf") format("truetype"),
url("fonts/tex-gyre-adventor/regular/tex-gyre-adventor.svg") format("svg");
font-weight: normal;
font-style: normal;
}
The problem is that the Caviar Dreams Bold doesn't load. It just doesn't appear in the Sources tab in the Inspector (all others are shown). Chrome 32 works well. No errors or warnings are thrown.
I use the font like this:
#feedback input[type="submit"] {
text-transform: uppercase;
font-family: "Caviar Dreams Bold", "Calibri", sans-serif;
font-variant: small-caps;
}
The Calibri font is used by Opera instead.
Update 1
It seems that Calibri Bold is ignored too. Why are the bold fonts ignored?
Update 2
Don't be surprised that I don't specify font-weight: bold in the #font-face queries: for some reasons it didn't work and I had to do my job fast. So that fact that different font-family doesn't being load seems very interesting to me. And it's more interesting that as we know that Opera's rendering should work as Blink do.
Does the Caviar Dreams Bold font actually contain small caps? If not, Opera probably concludes the request glyps can't be found and will fall back to Calibri. What happens if you remove the font-variant: small-caps; rule?
Edit: Interesting bug report on why Blink doesn't fall back to "small-caps synthesis" (as it is apparently called): https://code.google.com/p/chromium/issues/detail?id=298970 Seems like removing the SVG font from your #font-face rule will do the trick.