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.
Related
font-famil is same for all browser except safari
CSS for applying font-family throughout the application body
body {
height: 100%;
font-size: .80em;
font-family : "PT Sans","Century Gothic",Verdana, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
color: Black;
}
For windows google font PT Sans is not supported for safari browser.
See here in the git hub
Use google PT Sans font
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
OR you may download PT Sans webkit font from this website and include individually in you website
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 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.
As many of you will be aware when using windows + Chrome + Google fonts they can appear very distorted and choppy. I have implemented a fix which overrides the font with the SVG version of the font hosted on my site's server. So we have something like this:
<link href='http://fonts.googleapis.com/css?family=Oswald:400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
The style file containing:
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
src: url('fonts/oswald-regular-webfont.svg#oswaldregular') format('svg');
}
}
This works well for making the font appear smooth and clean like it should. However I have noticed a problem when it comes to the spacing around the font. If I add a background colour and padding to an element using the font, for example:
HTML:
<h1>Oswald Font Test</h1>
CSS:
h1 {
background: purple;
color: #fff;
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
padding: 5px;
}
Then I find that the font in Chrome is not vertically central but instead closer to the top edge of the box. Whereas all the other browsers using the font-styles from Google are centrally aligned.
Question: Can anything be done to correct the alignment of my Google override?
I think the answer may lie in modifying the svg file's attributes, i.e:
<font-face units-per-em="2048" ascent="1638" descent="-410" />
The following font declaration is not working in Internet Explorer 11.
font:300 28px/1.1em 'Lora', arial, sans-serif;
The text is displayed in arial instead of Lora. Lora is a Google Font.
It's working however in Mozilla Firefox, QupZilla and Google Chrome.
But when I change the declaration to
font:300 28px/1.1em 'Lora';
it's working in IE 11.
What could be the problem?
It gets even stranger: When I save the website as an *.html file to my local disc, the font is displayed correctly. :-(
Embed Google font on <head>.
<link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
and then try below css
.class{
font-family: 'Lora', Arial, sans-serif;
font-weight:400;
font-size:28px/1.1em;
}