I am using Google fonts in a few of my pages and hit a wall when trying to use variations of a font. Example: http://www.google.com/webfonts#QuickUsePlace:quickUse/Family:Open+Sans
I am importing three faces, Normal, Bold, ExtraBold via the link tag. The normal face displays correctly, but I cannot figure out how to use the variants of the font in my CSS
I tried all of the following as attributes for font-family but no dice:
'Open Sans Bold'
'Open Sans 700'
'Open Sans Bold 700'
'Open Sans:Bold'
The google docs themselves do not offer much help. Anyone have an idea of how I should write my CSS rules to display these variants?
They use regular CSS.
Just use your regular font family like this:
font-family: 'Open Sans', sans-serif;
Now you decide what "weight" the font should have by adding
for semi-bold
font-weight:600;
for bold (700)
font-weight:bold;
for extra bold (800)
font-weight:800;
Like this its fallback proof, so if the google font should "fail" your backup font Arial/Helvetica(Sans-serif) use the same weight as the google font.
Pretty smart :-)
Note that the different font weights have to be specifically imported via the link tag url (family query param of the google font url) in the header.
For example the following link will include both weights 400 and 700:
<link href='fonts.googleapis.com/css?family=Comfortaa:400,700'; rel='stylesheet' type='text/css'>
For CSS2
<link href='fonts.googleapis.com/css2?family=Comfortaa:wght#400;700'; rel='stylesheet' type='text/css'>
Here's the issue: You can't specify font weights that don't exist in the font set from Google. Click on the SEE SPECIMEN link below the font, then scroll down to the STYLES section. There you'll see each of the "styles" available for that particular font. Sadly Google doesn't list the CSS font weights for each style. Here's how the names map to CSS font weight numbers:
Thin 100
Extra Light 200
Light 300
Regular 400
Medium 500
Semi-Bold 600
Bold 700
Extra-Bold 800
Black 900
Note that very few fonts come in all 9 weights.
font-family:'Open Sans' , sans-serif;
For light:
font-weight : 100;
Or
font-weight : lighter;
For normal:
font-weight : 500;
Or
font-weight : normal;
For bold:
font-weight : 700;
Or
font-weight : bold;
For more bolder:
font-weight : 900;
Or
font-weight : bolder;
The API has been updated, now you have to import the desired font-weight using ":wght#700"
Ex: "https://fonts.googleapis.com/css2?family=Inter:wght#700&display=swap"
source: https://developers.google.com/fonts/docs/css2
In case anyone is looking for latest format with multiple font families + weights, see below (ex. w/ Open Sans + Roboto)
https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght#0,300;0,400;0,600;0,700;0,800;1,800&family=Roboto:wght#500&display=swap
Note that the latest version of google fonts web interface has bad UX for displaying the code sample. There is a 'selected families' panel which displays and then disappears, and it overlaps the font variations 'add' buttons (the plus / minus signs), which are also located on the right. The solution, which is not intuitive, is to reload the page.
you can use the weight value specified in the Google Fonts.
body{
font-family: 'Heebo', sans-serif;
font-weight: 100;
}
I experienced a similar problem in lec 72 of angela yu's course and we have to define the font-weight along with font-family
h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 900;
font-size: 3rem;
line-height: 1.5;
}
Related
I need to includes the font-faces directly in the DOM, what I'm trying to say is I need to put the font-faces in a tag. I could did it, but now, the fonts looks different
PD: ONLY HAPPENS WITH OPEN SANS FONT
I tried to put different css properties, like font-smoothing
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering: optimizeLegibility;
Update: Well, I found the problem, but not the solution, it's a weird issue. By downloading the "OpenSans-Regular" you can notice it's not only regular, if you put the
font-weight: bold;
You will able to see a bold weight, but not really the original "OpenSans-Bold", if you download the "OpenSans-Bold" you can see a difference bewtween put
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
font-family: 'Open Sans'; // Actually this is the open sans regular
font-weight: bold;
Results:
AND
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" rel="stylesheet">
font-family: 'Open Sans'; // And this is the original open sans bold
font-weight: bold;
Results:
The second result is bolder than regular (obviously) with font weight 700
Does anyone know what this behavior is due to? I need to use the bold of the Regular and the original bold of "OpenSans-Bold" (both of them in the same website). Thanks in advance.
(Friendly reminder! I'm not using google fonts API, just for example purpose -but I downloaded manually OpenSans from it-)
For example I want to use Monsterrat font-family. I import it to my css file like this:
#import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
Then I can use it like this:
font-family: 'Montserrat', sans-serif;
The url above has font-weight and italic modifiers and have their own names like, "Light Italic", "Italic Medium" etc...
My problem with that, I can simply adjust font weight: 300, and font-style: italic without the url. I want to use the name "Italic Medium" INLINE, like the this.
font-family: 'Montserrat', Light Italic;
Is it possible to do?
Yes and no,
Your example is:
font-family: 'Montserrat', Light Italic;
The Google font weight 'light' is weight 300 (for italic or normal font-style). And also in CSS font-weight: normal is equivelent to font-weight: 400, and bold is equivelent to 700.
So that allows us to get close using the font shorthand syntax which allows a number of font properties such as the font-style, font-weight and font-family you want to be declared in one go.
Unfortunately, the font-size value is a requirement of the font shorthand syntax so you'll need that in there too:
font: italic normal 1rem 'monserrat'
or
font: italic 300 1rem 'monserrat'
The second one there gets you the equivalent of the 'Light' font-weight but 'Light' isn't a valid CSS font-weight - 'normal' and 'bold' are along with a few relative terms as well such as 'lighter' or 'bolder'.
You could also use initial or inherit as possible values for the font-size.
You can use that style inline.
<p style="font: italic 300 1rem 'monserrat'">...</p>
Not quite what you were after? But as close as you will get :)
More about font shorthand:
https://css-tricks.com/snippets/css/font-shorthand/
https://www.impressivewebs.com/css-font-shorthand-property-cheat-sheet/
And an additional point - each of the styles you include in your import rule add to the load time and bulk of your page, it's probably a good idea to identify which you will use and only include those. For example, if you don't need a 700 weight italic font, don't include the 700i in your import
I am having trouble getting the Lato font to display ultra thin using Google web fonts. It is as thin as it should be on Google's page, but does not change its weight when I use it on my own page below 400 (I can go extra bold, bold and normal, but no thinner). This persists in both Chrome and Firefox.
I've tried the following variations of declaring the font:
font: 100 1em/1.5em 'Lato';
font: normal 100 1em/1.5em 'Lato';
font: normal 100 1em/1.5em 'Lato', sans-serif;
as well as without the shorthand version and using pixels for the font-size property like the font demo page. I've also tried several font sizes thinking maybe it can't render at smaller sizes, but this didn't make a difference. This is the only css on the page so there are no other rules that could be overriding it.
What else can I try?
You can amend your CSS this way:
font: 100 1em/1.5em 'Lato';
font: Ultra-Light 100 1em/1.5em 'Lato';
font: Ultra-Light 100 1em/1.5em 'Lato', sans-serif;
Also, make sure you have included the 100 weight of the Lato font, which is not included by default. If you need, the URL is:
http://fonts.googleapis.com/css?family=Lato:100,400
Fiddle: http://jsfiddle.net/praveenscience/AtdqY/
I am new to Google Fonts. I have gotten this URL from Google:
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
My question is, how to use the various fonts I have selected. They are, as you can see, Ubuntu Normal 400, Ubuntu Normal 400 Italic, Ubuntu Bold 700, and Ubuntu 700 italic.
I have tried everything but can only use plain "Ubuntu" and nothing else.
Please help!
Here is me using italic version of this: http://jsfiddle.net/6wzuy/
font-family:ubuntu;
font-style:italic;
font-weight: 700;
The technique is to use CSS font-style Property
font-family: 'Ubuntu', Arial, serif; font-weight: 700;
EDIT: You have to include separate font libraries of italics and bolds in order for them to work as intended.
If you don't include the italic and bold versions, the browser will try to compensate, but will more than likely do a very poor job. More about this in this List Apart article.
If you want to add font styles to your fonts, always add the extra font styles to and specify it in your document. Especially in large serif font it can make a huge difference.
The Google code you use declares regular, italic, bold, and bold italic typeface (specific font) as members of the font (font family) “Ubuntu”. This implies that you use italic and bolding just as you do when using normal fonts.
You can use font-style: italic to request for italic typeface and font-weight: bold (or, equivalently, font-weight: 700) to request bolding. Note that many HTML elements imply italic or bold by default; for example, h1, strong, and th elements imply font-weight: bold.
There are other ways of using #font-face so that each typeface is declared as a font family of its own; FotSquirrel does that. But the approach applied by Google is more logical and compatible with the way fonts are generally used in HTML and in CSS.
I am using Google fonts in a few of my pages and hit a wall when trying to use variations of a font. Example: http://www.google.com/webfonts#QuickUsePlace:quickUse/Family:Open+Sans
I am importing three faces, Normal, Bold, ExtraBold via the link tag. The normal face displays correctly, but I cannot figure out how to use the variants of the font in my CSS
I tried all of the following as attributes for font-family but no dice:
'Open Sans Bold'
'Open Sans 700'
'Open Sans Bold 700'
'Open Sans:Bold'
The google docs themselves do not offer much help. Anyone have an idea of how I should write my CSS rules to display these variants?
They use regular CSS.
Just use your regular font family like this:
font-family: 'Open Sans', sans-serif;
Now you decide what "weight" the font should have by adding
for semi-bold
font-weight:600;
for bold (700)
font-weight:bold;
for extra bold (800)
font-weight:800;
Like this its fallback proof, so if the google font should "fail" your backup font Arial/Helvetica(Sans-serif) use the same weight as the google font.
Pretty smart :-)
Note that the different font weights have to be specifically imported via the link tag url (family query param of the google font url) in the header.
For example the following link will include both weights 400 and 700:
<link href='fonts.googleapis.com/css?family=Comfortaa:400,700'; rel='stylesheet' type='text/css'>
For CSS2
<link href='fonts.googleapis.com/css2?family=Comfortaa:wght#400;700'; rel='stylesheet' type='text/css'>
Here's the issue: You can't specify font weights that don't exist in the font set from Google. Click on the SEE SPECIMEN link below the font, then scroll down to the STYLES section. There you'll see each of the "styles" available for that particular font. Sadly Google doesn't list the CSS font weights for each style. Here's how the names map to CSS font weight numbers:
Thin 100
Extra Light 200
Light 300
Regular 400
Medium 500
Semi-Bold 600
Bold 700
Extra-Bold 800
Black 900
Note that very few fonts come in all 9 weights.
font-family:'Open Sans' , sans-serif;
For light:
font-weight : 100;
Or
font-weight : lighter;
For normal:
font-weight : 500;
Or
font-weight : normal;
For bold:
font-weight : 700;
Or
font-weight : bold;
For more bolder:
font-weight : 900;
Or
font-weight : bolder;
The API has been updated, now you have to import the desired font-weight using ":wght#700"
Ex: "https://fonts.googleapis.com/css2?family=Inter:wght#700&display=swap"
source: https://developers.google.com/fonts/docs/css2
In case anyone is looking for latest format with multiple font families + weights, see below (ex. w/ Open Sans + Roboto)
https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght#0,300;0,400;0,600;0,700;0,800;1,800&family=Roboto:wght#500&display=swap
Note that the latest version of google fonts web interface has bad UX for displaying the code sample. There is a 'selected families' panel which displays and then disappears, and it overlaps the font variations 'add' buttons (the plus / minus signs), which are also located on the right. The solution, which is not intuitive, is to reload the page.
you can use the weight value specified in the Google Fonts.
body{
font-family: 'Heebo', sans-serif;
font-weight: 100;
}
I experienced a similar problem in lec 72 of angela yu's course and we have to define the font-weight along with font-family
h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 900;
font-size: 3rem;
line-height: 1.5;
}