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
Related
I am trying to use google fonts on my web but I have an issue with internet explorer. I am using #import, and when I google it I see that people use it this way:
#import url('http://fonts.googleapis.com/css?family=Open+Sans');
The thing is that the link i got looks like this:
#import url(http://fonts.googleapis.com/earlyaccess/opensanshebrew.css);
When I open my web on IE there is no text at all.
Do I have to get the webfont files? Or is there a way to fix this?
Hia
I've had the same issue, so I've created a new web version of this font which works great with IE.
You can download it Here:
http://assafk.com/staff/open_sans_hebrew/Opes_Sans_Hebrew_Fixed.rar
Thanks!
Assaf
after you download the files in the rar, add this css to use it:
#font-face {
font-family: 'Open Sans Hebrew';
font-style: italic;
font-weight: 300;
src: url(opensanshebrew-lightitalic-webfont.eot);
src: url(opensanshebrew-lightitalic-webfont.eot?#iefix) format('embedded-opentype'),
url(opensanshebrew-lightitalic-webfont.woff) format('woff'),
url(opensanshebrew-lightitalic-webfont.ttf) format('truetype');
}
#font-face {
font-family: 'Open Sans Hebrew';
font-style: normal;
font-weight: 300;
src: url(opensanshebrew-light-webfont.eot);
src: url(opensanshebrew-light-webfont.eot?#iefix) format('embedded-opentype'),
url(opensanshebrew-light-webfont.woff) format('woff'),
url(opensanshebrew-light-webfont.ttf) format('truetype');
}
#font-face {
font-family: 'Open Sans Hebrew';
font-style: italic;
font-weight: 400;
src: url(opensanshebrew-italic-webfont.eot);
src: url(opensanshebrew-italic-webfont.eot?#iefix) format('embedded-opentype'),
url(opensanshebrew-italic-webfont.woff) format('woff'),
url(opensanshebrew-italic-webfont.ttf) format('truetype');
}
#font-face {
font-family: 'Open Sans Hebrew';
font-style: normal;
font-weight: 400;
src: url(opensanshebrew-regular-webfont.eot);
src: url(opensanshebrew-regular-webfont.eot?#iefix) format('embedded-opentype'),
url(opensanshebrew-regular-webfont.woff) format('woff'),
url(opensanshebrew-regular-webfont.ttf) format('truetype');
}
#font-face {
font-family: 'Open Sans Hebrew';
font-style: italic;
font-weight: 700;
src: url(opensanshebrew-bolditalic-webfont.eot);
src: url(opensanshebrew-bolditalic-webfont.eot?#iefix) format('embedded-opentype'),
url(opensanshebrew-bolditalic-webfont.woff) format('woff'),
url(opensanshebrew-bolditalic-webfont.ttf) format('truetype');
}
#font-face {
font-family: 'Open Sans Hebrew';
font-style: normal;
font-weight: 700;
src: url(opensanshebrew-bold-webfont.eot);
src: url(opensanshebrew-bold-webfont.eot?#iefix) format('embedded-opentype'),
url(opensanshebrew-bold-webfont.woff) format('woff'),
url(opensanshebrew-bold-webfont.ttf) format('truetype');
}
#font-face {
font-family: 'Open Sans Hebrew';
font-style: italic;
font-weight: 800;
src: url(opensanshebrew-extrabold-webfont.eot);
src: url(opensanshebrew-extrabold-webfont.eot?#iefix) format('embedded-opentype'),
url(opensanshebrew-extrabold-webfont.woff) format('woff'),
url(opensanshebrew-extrabold-webfont.ttf) format('truetype');
}
#font-face {
font-family: 'Open Sans Hebrew';
font-style: normal;
font-weight: 800;
src: url(opensanshebrew-extrabold-webfont.eot);
src: url(opensanshebrew-extrabold-webfont.eot?#iefix) format('embedded-opentype'),
url(opensanshebrew-extrabold-webfont.woff) format('woff'),
url(opensanshebrew-extrabold-webfont.ttf) format('truetype');
}
Sheriffderek is right in the comments on one of these answers - you shouldn't be using #import - but didn't explain him/herself. You likely have a cross domain issue and both IE and Firefox blocking remote requests made like this. You have to associate the content type with your remote request so that it isn't blocked.
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
The 'type' parameter here is key - it is what allows the remote request to happen in IE and FF. CSS is allowed to do this kind of cross domain linking, as it is judged by the W3C gods to be a low security risk.
Check these links out for more information on CORS:
IE's explanation: http://msdn.microsoft.com/en-us/library/ie/gg622939%28v=vs.85%29.aspx
Mozilla's thoughts: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
The JS side of implementation (if you are really curious): http://www.html5rocks.com/en/tutorials/cors/
Why don't you use :
<link href='link-to-your-css/file.css' rel='stylesheet' type='text/css'>
Don't use #import
This is a problem with the Open Sans Hebrew font itself, a problem that has been reported several times on the Google Fonts Early Access Discussions forum, with no solution posted so far. Consider using some other “Early Access” (i.e., experimentanl) font, such as Alef Hebrew.
#font-face is driving me bonkers! What else is new?
I have this code in my stylesheet:
#font-face {
font-family: BebasNeue;
src: url('/style/fonts/bebasneue-webfont.svg#bebas_neueregular') format('svg'),
url('/style/fonts/bebasneue-webfont.woff') format('woff'),
url('/style/fonts/bebasneue-webfont.ttf') format ('truetype'),
url('/style/fonts/bebasneue-webfont.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: Quicksand;
src: url('/style/fonts/quicksand-regular-webfont.svg#Quicksand') format('svg'),
url('/style/fonts/quicksand-regular-webfont.woff') format('woff'),
url('/style/fonts/quicksand-regular-webfont.ttf') format('truetype'),
url('/style/fonts/quicksand-regular-webfont.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
Quicksand loads, Bebas does not. I have re-downloaded the font (from Font Squirrel), reconverted it, pulled my hair out, prayed to Odin...
In Chrome's inspector I get an "Invalid CSS property value on the SVG line of the Bebas stylesheet, but I can't see any difference between that and the same line under Quicksand. In both Chrome and FF, quicksand-regular-webfont.woff shows up under resources, but -surprise!- not bebasneue-webfont.woff.
Is it possible that the mistake is here:
src: url('/style/fonts/bebasneue-webfont.svg#bebas_neueregular') format('svg')
and you have to write ...#bebasneue_regular instead?
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 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've noticed when using web fonts that they can initially can take a second to come up; like if you create a drop down nav menu, when you hover over the menu for the first time the whole menu will appear as just the background color for a second and then the text will appear.
This isn't really ideal and it leads me to believe that webfonts aren't downloaded when the CSS file is loaded, but rather when you first view them on the page.
But on the other hand, I already have the fonts installed on my PC so they shouldn't need to be downloaded, so that lends the question on why do they do this!?
Here is the CSS I use to load my webfonts:
#font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Regular-webfont.eot');
src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
url('../fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Italic-webfont.eot');
src: url('../fonts/Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Roboto-Italic-webfont.woff') format('woff'),
url('../fonts/Roboto-Italic-webfont.ttf') format('truetype'),
url('../fonts/Roboto-Italic-webfont.svg#RobotoItalic') format('svg');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Bold-webfont.eot');
src: url('../fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Roboto-Bold-webfont.woff') format('woff'),
url('../fonts/Roboto-Bold-webfont.ttf') format('truetype'),
url('../fonts/Roboto-Bold-webfont.svg#RobotoBold') format('svg');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Light-webfont.eot');
src: url('../fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Roboto-Light-webfont.woff') format('woff'),
url('../fonts/Roboto-Light-webfont.ttf') format('truetype'),
url('../fonts/Roboto-Light-webfont.svg#RobotoLight') format('svg');
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Medium-webfont.eot');
src: url('../fonts/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Roboto-Medium-webfont.woff') format('woff'),
url('../fonts/Roboto-Medium-webfont.ttf') format('truetype'),
url('../fonts/Roboto-Medium-webfont.svg#RobotoMedium') format('svg');
font-weight: 500;
font-style: normal;
}
When are webfonts downloaded?
Paul Irish made a simple page to test this: http://dl.getdropbox.com/u/39519/webfontsdemo/loadtest.html
It shows that most browsers download fonts when they're used in a page rather than when they're declared in CSS. I believe IE is the exception but I don't have it running to test right now.
The reason for downloading on usage rather than on declaration is to reduce unnecessary network traffic, e.g. if a font is declared but not used.
Can font downloading be avoided?
You're right that if fonts are already installed they shouldn't need to be downloaded. As #Patrick said above, this can be done using local(). It's placed before url() in the CSS and takes the name of the font (the PostScript name is subsequently needed for Safari on Mac OS X). Try out the following change to your CSS:
#font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Regular-webfont.eot');
src: local(Roboto Regular), local(Roboto-Regular),
url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
url('../fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Finally, to reduce font download times, you could make sure you're doing the following:
Putting CSS before JavaScript
Adding far-future Expires headers for
the fonts (so the browser caches them)
GZipping the fonts
Here's a good summary of dealing with font display delays: http://paulirish.com/2009/fighting-the-font-face-fout/