I'm testing a page in Internet Exploder 8, and I'm failing to get one of the Google hosted fonts to render the correct weight. Given the following code:
#import url(http://fonts.googleapis.com/css?family=Lato:100,400);
h1{
font-family: 'Lato-Thin', 'Lato', sans-serif;
font-size: 80px;
font-weight: 100;
}
p{
font-family: 'Lato', sans-serif;
font-size: 16px;
font-weight: 400;
}
The paragraph tags renders in 400 weight, but so does the heading. If I change the import line to:
#import url(http://fonts.googleapis.com/css?family=Lato:100);
The heading no longer renders in Lato, even though the 100 weight is still downloaded.
Is there a way round this?
Here's a Fiddle.
It appears that this is a compatibility issue between the way Google serves its custom fonts, and how IE8 would rather them served.
Issue 9 here: https://code.google.com/p/googlefontdirectory/issues/detail?id=9
A workaround is possible if the fonts are stored locally, but that doesn't directly address the problem described in my question.
Related
I'm building a simple landing page here. I'm calling a custom font (Harbour) via #fontface but on Chrome, the title first defaults to a basic font. It takes a refresh for the custom font to appear. Anyone know what's happening here?
You are not declaring the font in any of your elements.
in your base.css; you are declaring those fonts at body:
font-family: 'Trash', Futura, 'IBM Plex Sans', Arial, sans-serif;
you should put:
font-family: 'Harbour';
in the element you want it to open
like:
h1 {
font-size: 2em;
margin: 0.67em 0;
font-family: 'Harbour';
}
DUPLICATE CLARIFICATION - This question relates to cross browser differences in font weights, the question highlighted as possible duplicate relates to uploading font files correctly.
I'm uploading a site onto Wordpress using a child theme of html5blank and am getting variations of font-weights across different browsers which I'm not getting with just the stand alone front-end text files.
This is what I mean on text for a hover effect -
Chrome/Safari
Firefox (this is what I want)
I've tried to use the code from the answer of this stack question
body {
-webkit-font-smoothing: subpixel-antialiased;
}
But that hasn't worked. If I use font-weight: bold; then it works for Chrome but throws out Firefox and Safari. This is the font I'm using -
#font-face {
font-family: 'Gotham-Light';
src: url('fonts/Gotham-Light.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'Gotham-Light', sans-serif;
font-size: 16px;
-webkit-font-smoothing: subpixel-antialiased;
}
Is there any way I can fix this? The client is a design professional and was quite specific on stuff like this. Any help appreciated.
First, you should have all of the font types associated with that typeface for cross-browser compatibility:
CSS3 Web Fonts
You can actually make them here:
Font Squirrel Webfont Generator
And sometimes you cannot control how browsers will handle different fonts. Safari will act totally different than Firefox, etc.
Lastly: It does help to use actual font WEIGHTS instead of the default "bold" and "light".
Example:
body {
font-family: 'Gotham-Light', sans-serif;
font-weight: 300;
font-size: 16px;
-webkit-font-smoothing: subpixel-antialiased;
}
I hope this helps.
I have a website for internal use that uses the Roboto google font. Here is the code that includes it.
<link href="//fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet" type="text/css">.
&
body {
font-family: "Roboto";
}
b, strong {
font-weight: 700;
}
I've found someone at my company who's Chrome can't render this font when it is bold. I could replicate it by going to Youtube and making Roboto text bold with the inspect element. This problem does not occur on any other computers. The Chrome is up to date and has no extensions installed. I've tried closing and reopening Chrome as well as several hard refreshes. Forcing the browser to repaint with resize, CSS, or JS does not fix the issue either.
This does not dupe question Font Weight with Google Fonts Roboto, normal (400) and bold (700) work, light (300) does not. The problem occurs on both http and https versions of the site, the font is loaded with //, and I get no insecure content warnings from Chrome.
What is causing this, and is there anything I can do on the website or on the persons computer to further troubleshoot or fix this?
If you use Google Fonts
<link href="//fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet" type="text/css">
without a fallback font like;
body {
font-family: "Roboto";
}
b, strong {
font-weight: 700;
}
You should provide that font-weight in your Google Fonts link like;
<link href="//fonts.googleapis.com/css?family=Roboto:500,700" rel="stylesheet" type="text/css">
Or, you should provide a fallback font;
body {
font-family: "Roboto", sans-serif;
}
By doing so, if your browser can't find the font-weight: 700; Roboto font, it can use a suitable sans-serif font from your system.
In ideal situations, using a font-family to support all possible computer systems like;
body {
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
will solve all of these problems.
I'm currently working on a store on Tictail (it's not uploaded yet, so I don't have a link). I want to use the font PT Sans Narrow for the store, but there is a problem:
The font displays correctly in Safari and Firefox on my iMac, but when my friend tries it in Firefox and Internet Explorer on his PC, the font doesn't display correctly.
This is what I'm working with:
<link href="{{assets_url}}/shared/css/base.css" rel="stylesheet" type="text/css">
body {
background-color: #fff;
font-family: 'PT Sans Narrow', sans-serif;
letter-spacing: -0.02em;
font-size: 14px;
line-height: 1.5em;
color: #222;
-webkit-font-smoothing:antialiased;
height: 100%;
}
What is the problem and how can it be solved?
It's because Windows don't have 'PT Sans Narrow' as default font. You need to add this font like a web-font. For instance from Google Fonts.
Simplest way:
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>
Put this at the top of your base.css. It will import PT Sans Narrow from Google Fonts.
#import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);
A webpage will always check to see if the user has the font installed on their computer. If they don't it will import it from Google Fonts.
I need a solution.. I am using google fonts on my website, but it is not working in safari, how can I tell the browser to use a different style when the font is not working? Here is my css code:
#import url(http://fonts.googleapis.com/css?family=Pontano+Sans);
h2{
font-family: 'Pontano Sans', sans-serif;
font-size: 15px;
text-transform: uppercase;
}
I just want to have another css rule like this, but without it overriding the above rule:
h2{
font-family: Arial, Helvetica, sans-serif;
color: #666;
font-size: 12px;
}
you should use the web-fonts loader capabilities to handle scenarios where fonts are not loaded.
that way, you can specify different styles based on the load state (active / inactive / loading).
see the web-fonts loader reference on loading states (and on github).