Roboto 'Thin' with Google Fonts - html

So I'm trying to get Roboto Thin working in my CSS through Google Fonts
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:bold&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:thin&display=swap" rel="stylesheet">
I can get the normal Roboto working just fine, but not when I try to specify the thin weight like so:
body {
font: 16px/21px Roboto, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-weight: thin;
}
It just gives me the regular weight... can anyone see what I'm doing wrong?

thin is not a valid keyword for font-weight. According to Google Fonts (when you select "Roboto" and then look at the "customize" list of weights) Thin corresponds to a weight of 100

If you look at the font source by going to the link in the CSS you can see the light font is weight 100, so you can just do this:
body{
font-family: 'Roboto', sans-serif;
}
.normal{
font-weight: 400;
}
.light{
font-weight: 100;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400&display=swap" rel="stylesheet">
<!-- 100 is light, 400 is normal -->
<p class="normal">Lorem ipsum</p>
<p class="light">Lorem ipsum</p>
You can get the link by selecting the font in Google Fonts, clicking on the font name in the bottom right hand corner, going to customize and checking all the font weight boxes you need. Then go back to embed and copy the link. Don't just use the weight though - import the link too or you'll get font scaling and spacing problems on Firefox on Ubuntu.

Related

How to use SourceSansPro to match design cross browsers

I used SourceSansPro to match the font in design, FF, Safari seem ok. Chrome and IE 11 have issue.
Here is the design for the font (due to proxy, cannot upload, but have a look at FF and Safari)
Here is code:
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro"
rel="stylesheet"
type="text/css"
/>
<style>
.fontStyle {
font-style: normal;
font-size: 16px;
font-family: "SourceSansPro", Helvetica, Arial, sans-serif;
color: #000;
font-weight: 500;
}
</style>
</head>
<div class="fontStyle">
Drop a file here
</div>
</html>
It seems the bold is quite different in IE and Chrome.
In summary, need to make the font style in IE and Chrome, same as FF and Safari.
By default, the code you're using there only include the 400-weight font, and browsers have different reactions when trying to get a bold version of a lighter font - some make it bold themselves, or just load a different font. In order to load the font weights you want (along with italic versions), you can use a line like this:
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i&display=swap" rel="stylesheet">
With the versions/weights separated with commas.
If you go to the Google Font page for this, you can click "Customize" to select which fonts to include, and it'll generate the embed code for you.
You can use this code
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet" type="text/css" />
<style>
.fontStyle {
font-style: normal;
font-size: 16px;
font-family: 'Source Sans Pro', sans-serif;
color: #000;
font-weight: 500;
}
</style>
</head>
<div class="fontStyle">
Drop a file here
</div>
</html>

Can't get google font to work

I have looked through other peoples answers to the question and followed the instructions on google and just cannot get it to work. Here is what I have used.
#import url('https://fonts.googleapis.com/css?family=Archivo+Black|Playfair+Display:400,700i,900');
The worst part is that Playfiar Display is working fine, Archivo is not at all.
For reference, georgialee.design is the URL. (works on every browser except for internet explorer)
Thank you so much! I'm sure it'll be some silly mistake :)
In header section you import it
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
or
<style>
#import url('https://fonts.googleapis.com/css?family=Archivo+Black');
</style>
In style.css file
body{
font-family: 'Archivo Black', sans-serif;
}
Copy this code into the < head > of your HTML document:
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
In your CSS file, use the following rule to set the font-family:
// if you only want to change h1 fonts, use this selector
h1 {
font-family: 'Archivo Black', sans-serif;
}
For example:
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<style>
// default font for everything in the body
body {
font-family: 'Playfair Display', serif;
}
// make all h1 Archivo
// note: if you want h2, h3 etc to be archivo as well you need to add the respective selector
body h1 {
font-family: 'Archivo Black', sans-serif;
}
</style>
</head>
<body>
<div>rest of your page...</div>
</body>
</html>
see more examples here
see here to find out more about css selectors

How to specifically use Roboto Thin and Normal font

i am trying to use Google font (Roboto) on my website. i attached the link to my html files
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400' rel='stylesheet' type='text/css'>
and i also attached this to my CSS
h1,h2
{
font-family: 'Roboto: 300', Century Gothic;
}
h3,h4,h5,h6{
font-family: 'Roboto: 400', Century Gothic;
}
but when i load it via my andriod phone and PC, it still doesn't change. Please what am i doing wrong?
The font name you're using is not correct. It is just 'Roboto'. You want to do:
h1,h2,h3,h4,h5,h6 {
font-family: 'Roboto', Century Gothic;
}
If you want to use different font weights, you could then do something like:
h1, h2 {
font-weight: normal;
}

Fonts are not rendered properly

I have a little experience with css, and learning it day by day, but I need to figure this out.
I have a little problem with defining the styles for the page.
My page contains the following sections:
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:Light' rel='stylesheet' type='text/css'>
</head>
.
.
.
.
<article>
<header>
<h1 class="txtName">Your pathway to success starts here</h1>
</header>
<p class="txtDesc">
SomeText.................SomeText
</p>
</article>
and I have the .css file containing the following section:
article h1
{
color: #0140be;
font-family: 'Open Sans';
font-style: Light;
font-size: 20px;
font-weight: normal;
}
article p.txtDesc
{
line-height:1.6;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 14px;
margin-left: 18px;
font-weight: 400;
}
The text inside the header is displayed with correct styles, however, text inside the paragraph is not displayed correctly. Looks like it is not recognizing given styles.
It displays the right font-family, but does not recognize font-weight.
What am I doing wrong here? Need some help.
Thank you
Link : https://www.google.com/fonts#UsePlace:use/Collection:Open+Sans
As you can see there is styles for fonts like "Light 300 Italic" or "Extra-Bold 800". You must select that styles for bolder or lighter fonts. Then you can use font-weight in css otherwise it doesnt works.
Dont Forget: When you select "light 300" you can use font-weight:300. So font-weight:200 is not make any differences. If you select too much font styles it will take more time to load fonts from google when opening your page. You can see performance indicator on right.
Your link tag should look like
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
You need to include each of the font weights that you want in the URL.
Your styles should be:
article h1
{
color: #0140be;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
}
article p.txtDesc
{
line-height:1.6;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
margin-left: 18px;
font-weight: 400;
}
You select which font style you want with the font-weight attribute.
JSFiddle

Issue with rendering Open Sans Light on Firefox

I have no problem displaying html pages on IE and Chrome using Open Sans Light, however when using Firefox, it does not understand this type of fonts.
This is a .css sections defining my fonts:
.txtName
{
margin-left: 18px;
font-size: 20px;
color: #0140be;
font-family: 'Open Sans Light' !important;
font-weight:normal;
line-height: 1.4em;
}
This is the part of html file that need to be displayed the same on IE, Chrome and FF:
<div class="txtName-Main">
<h1 class="txtName">Your pathway to success starts here</h1>
</div>
What can be the problem?
Thx
'Open Sans Light' is not a valid representation of the font-family. The 'Light' (300 weight) version of 'Open Sans' is:
In the head of your document:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
In your CSS:
font-family: 'Open Sans', sans-serif;
font-weight: 300;
I see a few suggestions, But what worked for me is loading my fonts with:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:Light' rel='stylesheet' type='text/css'>
and in .css I had to use the following definition:
color: #0140be;
font-family: 'Open Sans';
font-style: Light;
font-size: 20px;
font-weight: normal;
So, instead of having:
font-family: 'Open Sans Light'
I used
font-family: 'Open Sans';
font-style: Light;
and it worked
it appears that all the browsers are somehow using different definitions for at least this font. i had it installed on my site and been trying to figure how to make it look descent in all browsers, not just chrome and opera - as all others, that is firefox, ie and safari had those fonts screwed. until accidentally i made firefox see the font ok, but then chrome and opera got screwed. so that was when i realized that actually assigning the same font in two different ways solves the problem: if the browser's ok with the first definition, it won't look at the next one, otherwise it'll go for the second one. ah, the code itself:
font-family: open sans condensed light, open sans condensed;
i used it for assigning fonts to different divs. cheers, hope this helps.
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
Goes in the <head> element and downloads light and regular fonts
In css style:
ul, p, h1, h2, h3, h4, h5, li, dd, dt, a{
font-family:'Open Sans', sans-serif;
font-weight: 300;
font-style: normal;
sets up (most) elements for web-based font and a (local) fall back font. font-style: normal is default, so it is not required. (Font-style:Light is not valid property.)