I am using Google's Open Sans Font in my application.
I have defined the stylesheet as instructed:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700'
rel='stylesheet' type='text/css'>
I then used it on the body selector as:
body {
font-family: 'Open Sans', sans-serif;
}
I have not defined font family anywhere else. I assume that since I have defined it at the parent, the child elements will automatically inherit it.
However, if I open up the inspector for say an anchor tag in my application and see the computed styles for that tag, I find that (Chrome Latest) the "Rendered Font" says "Times New Roman 18 glyphs" - Is this correct? I was expecting it to say "Open Sans" - Is the Open Sans font not being applied?
Check out the codepen link. Its working fine for me !
.open-sans-font{
font-family: 'Open Sans', sans-serif;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<div class="open-sans-font">
Stackoverflow rocks !!!
</div>
Related
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.
This question already has answers here:
How to import Google Web Font in CSS file?
(13 answers)
Closed 7 years ago.
I would like to use googles "source sans pro" font in the font-family attribute in CSS, in my HTML site. I use Bootstrap as a front end framework.
https://www.google.com/fonts/specimen/Source+Sans+Pro
How can I achieve that?
Do I have to include the file into my html site?
Thank you for any help!
Add this string in head section of your site:
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
Then use this font:
h1 {
font-family: 'Source Sans Pro', sans-serif;
}
The instructions are given on the link at the top of the page you show. https://www.google.com/fonts#UsePlace:use/Collection:Source+Sans+Pro
You include this in the head of your page:
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
and specify the font family in your CSS.
element {
font-family: "Source Sans Pro"
]
The fonts
You can select the fonts you want and you get a link:
for HTML
https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,900italic,900,700italic,700,600italic,600,400italic,300italic,300,200italic' rel='stylesheet' type='text/css'>
paste this link in your
Then use this in your css
font-family: 'Source Sans Pro', sans-serif;
so something like this
.class{
font-family: 'Source Sans Pro', sans-serif;
}
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'm trying to use and italic with google fonts and it's not working at all.
I included this line on my HTML.
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,300,400'
rel='stylesheet' type='text/css'>
For example, when I use the code below, all the texts look "normal" without bold and italic as expected. Any suggestions?
Thanks.
<p>this is a <b>bold</b> text and this is <i>italic</i> text</p>
Use the font according to its instructions (unless you understand well how the font works and can knowingly deviate from the instructions). In the interface, select Normal (selected by default), Normal Italic, and Bold, if you want just normal, italic, and bold (but not italic bold). Google then tells you what link element to use. And it works:
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700'
rel='stylesheet' type='text/css'>
<style>
p { font-family: Open Sans }
</style>
<p>this is a <b>bold</b> text and this is <i>italic</i> text</p>
Use the 700 font declaration:
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Extrabold'), local('OpenSans-Extrabold'),
url(http://themes.googleusercontent.com/static/fonts/opensans/v6/EInbV5DfGHOiMmvb1Xr-honF5uFdDttMLvmWuJdhhgs.ttf) format('truetype');
}
or, as in your example:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:800italic,700,300,600,800,400' rel='stylesheet' type='text/css'>
and then:
.yourClass {font-family: 'Open Sans'; font-weight: 700;}
The same way for the italic, as it is claims when you define your CSS font-type, and in the guide.
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;
}