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.
Related
I am using three fonts that I load via #font-face and they all look like they are supposed to on Chrome, but on Firefox and IE they look different. Like with extra bold added to them and they are more blocky.
#font-face {
font-family: 'OpenSans-Regular';
src: url('../fonts/OpenSans-Regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Montserrat-Regular';
src: url('../fonts/montserrat-regular-webfont.woff2') format('woff2'),
url('../fonts/montserrat-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Roboto-Regular';
src: url('../fonts/roboto-regular-webfont.woff2') format('woff2'),
url('../fonts/roboto-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
How I apply these fonts to elements:
...
font-family: "OpenSans-Regular", sans-serif;
...
If I edit the element in Firefox with dev tools and set font-family: Open Sans then it works like it should.
This problem is giving me a headache as I don't understand why this is happening.
All applications are developed with specific blocks of code. This is like "Default Font" on HTML and CSS. It happens with all web pages that are opened on different browsers. Try this thing with
Facebook
and you will see the difference between fonts on Chrome and Firefox. If font looked bolder than you wanted it, just play with "font-weight" on CSS StyleSheet. e.g.:
body.font-weight: xx px;
late reply but here goes; Firefox renders headers and some other elements as "double bold" in your case so you would have to remove the font weight from the element in order to normalize this if you don't want to load more font files[1].
To improve the rendering, try loading the fonts as follows[2][3]:
#font-face {
font-family: 'Roboto';
src: url('../fonts/roboto-regular-webfont.woff2') format('woff2'),
url('../fonts/roboto-regular-webfont.woff') format('woff');
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: 'Roboto';
src: url('../fonts/roboto-bold-webfont.woff2') format('woff2'),
url('../fonts/roboto-bold-webfont.woff') format('woff');
font-weight: 700;
font-style: normal;
}
#font-face {
font-family: 'Roboto';
src: url('../fonts/roboto-italic-webfont.woff2') format('woff2'),
url('../fonts/roboto-italic-webfont.woff') format('woff');
font-weight: 400;
font-style: italic;
}
[1] It is better to have fewer fonts but include the correct ones
[2] just the Roboto as an example but the same would apply for the rest as well
[3] consider defining the values in absolute numbers rather than relative values as these can be interpreted differently by the different browsers
Answer to my question was having different font weights, e.g. if you have google fonts then make sure you have light(300), regular (400), medium (500), bold (700) versions imported.
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 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
I am trying to find the code that can render font for IE versions 6 to 10. I tested the code from font squirrel, adobe webfonts and Google's font css but there is no code that works for all IE browsers.
Does anyone have the code for that?
I believe both of those services provide the code for all browsers that are supported, including IE, automatically.
For example, calling a font from Google font API with the style tag, will actually pull in a CSS file from Google with different font declarations.
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Karla:400,400italic,700,700italic" />
Generates the following CSS:
#font-face {
font-family: 'Karla';
font-style: normal;
font-weight: 400;
src: local('Karla'), local('Karla-Regular'), url(http://themes.googleusercontent.com/static/fonts/karla/v2/QT0qO2FiFD03cwUe_t62t6CWcynf_cDxXwCLxiixG1c.woff) format('woff');
}
#font-face {
font-family: 'Karla';
font-style: normal;
font-weight: 700;
src: local('Karla Bold'), local('Karla-Bold'), url(http://themes.googleusercontent.com/static/fonts/karla/v2/3nZS3BKzlvhkwl4yjCQcjHYhjbSpvc47ee6xR_80Hnw.woff) format('woff');
}
#font-face {
font-family: 'Karla';
font-style: italic;
font-weight: 400;
src: local('Karla Italic'), local('Karla-Italic'), url(http://themes.googleusercontent.com/static/fonts/karla/v2/ietJ6bjhwzrJL8NSJOc2mgLUuEpTyoUstqEm5AMlJo4.woff) format('woff');
}
#font-face {
font-family: 'Karla';
font-style: italic;
font-weight: 700;
src: local('Karla Bold Italic'), local('Karla-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/karla/v2/VZ08RdiotRdV1D0ewK-mxL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');
}
As you can see, there are different formats for different browsers. WOFF is for IE.
Mikey.
PS - Something I mentioned in the comments below:
Are you working and viewing this in IE locally? If so, it may not work. For it to work in IE, I think you have to be viewing the website on an actual server. Something to do with the 'headers' and origin policy in IE - it's a security thing. Could that be it?
I’m currently trying to implement webfonts on the site I build, I want to use it as a fallback within the font-family attribute, i.e. If the character is not represented in Arial / Helvetica then it should be within the webfont used.
I realise this will not work in IE6 and 7 but expected it to work in IE8 which it doesn’t seem too.
I was just wondering if anyone had ever had any experience of this problem and if using a webfont as a fallback font was possible in IE8 or if anyone can just see that I'm just doing something wrong within the code.
Thanks in advance, for any help
Here is my css code:
#font-face {
font-family: 'stix';
src: url('/webfonts/webfont.eot');
src: local('☺'), url('/webfonts/webfont.woff') format('woff'), url('/webfonts/webfont.ttf') format('truetype'), url('/webfonts/webfont.svg#webfont3hGwcDt1') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'stix';
src: url('/webfonts/bold-webfont.eot');
src: local('☺'), url('/webfonts/bold-webfont.woff') format('woff'), url('/webfonts/bold-webfont.ttf') format('truetype'), url('/webfonts/bold-webfont.svg#webfontJse4ZhT8') format('svg');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'stix';
src: url('/webfonts/talic-webfont.eot');
src: local('☺'), url('/webfonts/italic-webfont.woff') format('woff'), url('/webfonts/italic-webfont.ttf') format('truetype'), url('/webfonts/italic-webfont.svg#webfonthDLBqRGk') format('svg');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'stix';
src: url('/webfonts/bold_italic-webfont.eot');
src: local('☺'), url('/webfonts/bold_italic-webfont.woff') format('woff'), url('/webfonts/bold_italic-webfont.ttf') format('truetype'), url('/webfonts/bold_italic-webfont.svg#webfontnuMlJc7x') format('svg');
font-weight: bold;
font-style: italic;
}
body { font-family: arial, helvetica, clean, stix, sans-serif}
body.ie6 #content, body.ie6 .popup { font: 15px/1.6em stix; }
Try to use converter on fontsquirrel.com
What's the benefit of using STIX as a fallback?
If it's to prevent the UA downloading the font unless it's needed, you're out of luck, only webkit has that behaviour currently https://gist.github.com/478344 Worse still, IE will download all the fonts defined in #font-face even if they're not referenced anywhere else in the CSS.
If it's because STIX doesn't have regular chars, yeah, IE's going to screw you over here. I'd recommend merging STIX with a free typeface to create one deliverable that has all the chars you need.
I'm using a stripped down version of your code (for the sake of clarity alone - there's nothing wrong with it) and testing in lots of browsers (with the webfont being STIX, like you, not that I'm aware if this plays a role), and I'm seeing some odd behaviour: font fallback in most browsers does work, but only when excluding all italic variants of fonts (be they italic or bolditalic).
I.e. this works (100% of the time), with browsers falling back to STIX for those chars not in arial:
#font-face {
font-family: 'stix';
src: url('stixgeneral-webfont.eot');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'stix';
src: url('stixgeneralbol-webfont.eot');
font-weight: bold;
font-style: normal;
}
body {font-family: arial, stix, sans-serif;}
… but this does not work 100% of the time (although sometimes it does display the chars!):
#font-face {
font-family: 'stix';
src: url('stixgeneral-webfont.eot');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'stix';
src: url('stixgeneralitalic-webfont.eot'); /* note - italic font variant */
font-weight: normal;
font-style: italic;
}
body {font-family: arial, stix, sans-serif;}
The reason for this appears to be that the STIX fonts package has errors.
In order to get around this, open your STIX fonts package in FontForge and save - FontForge will inform you of errors. Fix these, and only then import into FontSquirrel. Font fallback should now work correctly.
The problem might be that "in Internet Explorer 8 and earlier versions, only one URL value is supported".
Also, rather than using #font-face for a fall-back font, choose one you'd prefer and don't declare "arial, helvetica" in which ever order, instead falling straight back on sans-serif. This way, the most suitable sans-serif is used on each platform, such as Arial for Windows and Helvetica for OS X, etc.
Btw... IE will try to load SVG format so you should define EOT src after svg! (IE bug).