I am using RobotoCondensed downloaded from google Web Fonts. I am using the font from my server. I have created the css like below.
#font-face {
font-family: 'Roboto Condensed';
src: url('../fonts/RobotoCondensed-Light.eot');
src: url('../fonts/RobotoCondensed-Light.eot?#iefix') format('embedded-opentype'),
url('../fonts/RobotoCondensed-Light.woff') format('woff'),
url('../fonts/RobotoCondensed-Light.ttf') format('truetype'),
url('../fonts/RobotoCondensed-Light.svg#svgFontName') format('svg');
}
All the font types specified are present in the folder that I have specified in the url.
I am using the font family like this
font-family: 'Roboto Condensed', sans-serif;
The things are going smooth with respect to IE9 and Chrome. But when it comes to Mozilla Firefox it is not so.
Is there any solution for this?
I'm using the one off the Google Fonts Api and it works in Firefox:
#font-face {
font-family: 'Roboto Condensed';
font-style: normal;
font-weight: 400;
src: local('Roboto Condensed Regular'), local('RobotoCondensed-Regular'), url(http://themes.googleusercontent.com/static/fonts/robotocondensed/v7/Zd2E9abXLFGSr9G3YK2MsNxB8OB85xaNTJvVSB9YUjQ.woff) format('woff');
}
Maybe try specifying style and weight.
just remove : font-weight: 300; from woff
Related
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'm using a font called "Lato", which was downloaded from the author site and converted to the proper formats using fontsquirrel.
After including the below CSS, Chrome developer tools crashes when I try to inspect text elements..
Here the font face code I'm using:
#font-face {
font-family: 'Lato';
src: url('../fonts/custom/lato-reg-webfont.eot');
src: url('../fonts/custom/lato-reg-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/custom/lato-reg-webfont.svg#latoregular') format('svg'),
url('../fonts/custom/lato-reg-webfont.woff') format('woff'),
url('../fonts/custom/lato-reg-webfont.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: 'Lato';
src: url('../fonts/custom/lato-bol-webfont.eot');
src: url('../fonts/custom/lato-bol-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/custom/lato-bol-webfont.svg#latobold') format('svg'),
url('../fonts/custom/lato-bol-webfont.woff') format('woff'),
url('../fonts/custom/lato-bol-webfont.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
This happens even If I just use one of these font-face declarations.
Any suggestions ?
This font appears to be on Google Fonts - assuming it is the same one? Give this a try instead of the Font Squirrel conversion: http://www.google.com/fonts#UsePlace:use/Collection:Lato
I'm embedding two weights of Raleway in an HTML email and want to self host.
I converted the Regular and Extra Bold weights using Font Squirrel, but only the regular weight is working. Not sure if there could be some sort of conflict because it's really one font being embedded as two separate ones?
The font files themselves look correct on the desktop. In the browser locally both fonts work.
Wondering if there is an alternative approach to converting the fonts that would sidestep the issue?
Embed code:
#font-face {
font-family: 'ralewayregular';
src: url('raleway-regular-webfont.eot');
src: url('raleway-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('raleway-regular-webfont.woff') format('woff'),
url('raleway-regular-webfont.ttf') format('truetype'),
url('raleway-regular-webfont.svg#ralewayregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'ralewayextrabold';
src: url('raleway-extrabold-webfont.eot');
src: url('raleway-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
url('raleway-extrabold-webfont.woff') format('woff'),
url('raleway-extrabold-webfont.ttf') format('truetype'),
url('raleway-extrabold-webfont.svg#ralewayextrabold') format('svg');
font-weight: normal;
font-style: normal;
}
Font Stack Samples:
font-family: 'ralewayregular',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif;
font-family: 'ralewayextrabold',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif;
EDIT:
I tried a revised font stack earlier treating Raleway as one font with two weights. It looks like the extra bold weight now is working in some clients, but not on email clients that usually have no trouble displaying webfonts such as Apple Mail on the iPad.
#font-face {
font-family: 'raleway';
src: url('raleway-regular-webfont.eot');
src: url('raleway-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('raleway-regular-webfont.woff') format('woff'),
url('raleway-regular-webfont.ttf') format('truetype'),
url('raleway-regular-webfont.svg#ralewayregular') format('svg');
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: 'raleway';
src: url('raleway-extrabold-webfont.eot');
src: url('raleway-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
url('raleway-extrabold-webfont.woff') format('woff'),
url('raleway-extrabold-webfont.ttf') format('truetype'),
url('raleway-extrabold-webfont.svg#ralewayextrabold') format('svg');
font-weight: 800;
font-style: normal;
}
Revised Font Stack:
<h1 style="font-size : 16px; line-height : 24px; letter-spacing : 2.72px; color: #ffffff; font-family: 'Raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif; font-weight: 800;">TEXT</h1>
Firstly, you don't need those quotes being you're making the font-family one word. Secondly, you really don't need to have two different font names, you can keep the same font name by keeping the same font-family name but making your font-weight:bold in the bold section of your #font-face. specify font-weight either in your inline css or by <b> or <strong> tags and it should work fine. Faux bolding isn't an issue unless your #font-face isn't loaded at all and you have the font in your OS's stack.
You should also try disabling raleway from your computer's font stack before testing. I also have my font files' url on an absolute path.
Hope one of those helps.
I'm pulling in the google font code using their include. Their CSS looks like this:
#font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 300;
src: url(http://themes.googleusercontent.com/static/fonts/oswald/v7/HqHm7BVC_nzzTui2lzQTDfY6323mHUZFJMgTvxaG2iE.eot);
src: local('Oswald Light'), local('Oswald-Light'), url(http://themes.googleusercontent.com/static/fonts/oswald/v7/HqHm7BVC_nzzTui2lzQTDfY6323mHUZFJMgTvxaG2iE.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/oswald/v7/HqHm7BVC_nzzTui2lzQTDT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
Using this I created a css class
.oswald {
font-family: 'Oswald', Verdana, Arial, Helvetica, sans-serif
}
Then I use that like this
<div class="oswald">text</div>
Here's where it gets a little weird. I'm using Visual Studio so when I debug it locally I see the correct font. When I put it up on the server it's showing me the Verdana font. Chrome also shows the wrong front. Safari and Firefox both show the correct font.
I've converted Oswald Regular into the necessary #font-face formats (TTF, OTF, EOT, SVG, WOFF).
#font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 300;
src: url('Archive/Oswald-Regular.eot');
src: local('Oswald'), url('Archive/Oswald-Regular.woff') format('woff'), url('Archive/Oswald-Regular.ttf') format('truetype'), url('Archive/Oswald-Regular.svg#Oswald-Regular') format('svg');
font-weight: normal;
font-style: normal;
}
And here is the link to the ZIP archive that contains the converted fonts: http://www.mediafire.com/?9xdr1w9wyvdoh09
I find using the css #import rule a lot more reliable and avoids having to have the 5x formats of fonts required for browser compatibility. Drop this in to the top of your CSS file:
#import url(http://fonts.googleapis.com/css?family=Oswald:400,700,300);
PS. This will include: light (font-weight: 300), regular (font-weight: 400) and bold (font-weight: 700) for Oswald.
In IE7 and IE8, when using a custom web font, text is sometimes rendered in italics, even when I explicitly set font-style: normal. The issue is sporadic - it will render fine a few times, then I refresh and everything is in italics, then I refresh and it's back to normal.
I'm using this #font-face declaration:
#font-face {
font-family: 'DIN';
src: url('fonts/DINWeb.eot');
src: url('fonts/DINWeb.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'DIN';
src: url('fonts/DINWeb-Bold.eot');
src: url('fonts/DINWeb-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'DIN';
src: url('fonts/DINWeb-Ita.eot');
src: url('fonts/DINWeb-Ita.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-Ita.woff') format('woff');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'DIN';
src: url('fonts/DINWeb-BoldIta.eot');
src: url('fonts/DINWeb-BoldIta.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-BoldIta.woff') format('woff');
font-weight: bold;
font-style: italic;
}
Theres a comment on this article that indicates it could be about the order of the #font-face declarations: however the only thing that stopped the problem was removing the italic declarations altogether.
Another Stack Overflow answer suggests using the Font Squirrel #font-face generator; I'm not able to do this however as the web font files I'm using have DRM.
Is there a way to solve this without completely removing the italic declarations?
UPDATE: Upon further investigation, it seems this issue affects IE8 as well, not just in compatibility mode.
For each of your #font-face font-family names, create a custom name instead.
Example:
#font-face {
font-family: 'DINnormal';
src: url('fonts/DINWeb.eot');
src: url('fonts/DINWeb.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'DINbold';
src: url('fonts/DINWeb-Bold.eot');
src: url('fonts/DINWeb-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'DINitalic';
src: url('fonts/DINWeb-Ita.eot');
src: url('fonts/DINWeb-Ita.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-Ita.woff') format('woff');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'DINboldItalic';
src: url('fonts/DINWeb-BoldIta.eot');
src: url('fonts/DINWeb-BoldIta.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-BoldIta.woff') format('woff');
font-weight: bold;
font-style: italic;
}
After those CSS rules are defined, then you can include specific CSS rule:
li {
font: 18px/27px 'DINnormal', Arial, sans-serif;
}
If, like me, you came across this question while experiencing a similar issue using TypeKit fonts, this entry from the TypeKit blog explains how you can force unique font-family names for each weight & style of a TypeKit font to address it.
I was having a similar issue, web font was showing in Italic when using IE8(Emulator), after digging and digging I came across a article that suggest emulator can sometimes be misleading especially when it comes to webFonts, and what it suggested was trying the site in the actual IE8, as I am using a windows 7 machine i wasn't able to download the real thing so I used this site called http://www.browserstack.com/ (No testers or fake browsers. Test in real browsers including Internet Explorer 6, 7, 8, 9, 10 and 11.)
and i noticed my font was not italic anymore :D
Here's the link to the article i read,
http://blog.typekit.com/2013/03/14/the-dangers-of-cross-browser-testing-with-ie9s-browser-modes/
Hope this helps you guys, if i came across something like this when researching it really would have saved me a few hours