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.
Related
I've just been playing with Google Fonts and found the Fira Sans font. It's nice but I don't like the Bold (700) style, it's too bold for my liking. However, if I select the Medium (500) style the browser doesn't use it for anything set to font-weight: bold (e.g. <strong>). Instead it uses some kind of faux bold that looks blurry.
I can go through my stylesheet and set every occurrence of bold to 500. I could also use Sass to set a variable like $bold-weight: 500; which helps if I decide to change the font later.
That's a bit of a pain though, plus bold is also the default for many browser styles (e.g. <strong>, <th>) so I have to make sure I catch every possible occurrence of that too. And there may be external scripts/styles I don't control.
Is there a way to make all occurrences of bold use weight 500?
Yes there is,
When you choose to quick use a google font, you are provided with a link to include into the header, Open the link into your web browser and you would be served with a css file with lots of
/* cyrillic-ext */
#font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 400;
src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v15/WxrXJa0C3KdtC7lMafG4dRTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
As you can see the font-style: italic and the font-weight: 400 is linked with some specific font (Roboto Italic here) within the #font-face tag, meaning whenever you use font-weight: italic with font-weight: 400 (or normal), it refers to the font described within the src attribute.
Now, if you want to make all the font-weight: bold in your css use this font face, just change the 400 in above font-style to bold and you are done.
Or you can make a duplicate of the complete #font-face{..} and use another font-style into it.
Also, you can use different fonts here as well. Make sure to keep only one font-style or font-weight tag within a #font-face.
This example here uses google fonts, you can use the same technique for self-hosted fonts.
[Before we start] I'm a Chinese user, and there are so many different weights of Chinese font. They are in the same font-family, but they didn't stay together like latin fonts, e.g., Huakang Chaohei(~Black) and Huakang Cuhei(~Bold).For that, I have to choose different font-family, rather than font-weight.
So this question happens so frequently to me when choosing different font-weight and font-family.
Just like the following picture, can I use font-family: "helvetica bold" in CSS? Or, use font-family: helvetica; font-weight: 600 to specify the bolder version of helvetica?
UPDATE:
Thanks all. So how to do with the name different than bold?
You would use the latter, like this:
font-family: helvetica;
font-weight: bold;
or you can use this:
font-weight: bold;
Note, you likely should include more fonts, as not all browsers will render helvetica, so you could use something like this:
font-family: Helvetica,Arial,sans-serif;
Edit to match the above edit:
he values you can use are normal (which is the default weight), bold, bolder, lighter. You can also use the values from 100 to 900, the higher being bolder. You can also use initial and inherit.
Note font-weight should work fine with Chinese; the fonts themselves are the ones you need to pay attention to.
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;
}
I used Arial italic on a website. I did it this way:
font-family: Arial;
font-style:italic;
font-weight:100;
In Photoshop Arial italic looks as thin as regular is. On the website it looks bold. I dont know if this is related to faux styles. If yes, how can I use the real Arial italic (In my fonts folder theres just one font, called Arial, no ArialItalic or something). If no, where does this come from and can I do something about it?
Here is a fiddle: http://jsfiddle.net/h84Vv/2/
Of course I don't know, if this is related to my system.
font-family: Arial;
font-style:italic;
font-weight:100;
try this:
http://jsfiddle.net/h84Vv/2/
If you want to text bold
Italic
Bold
Normally, the Arial font family contains a regular, italic, bold, and italic bold typeface, and with your settings, you get the italic typeface. Setting font-weight: 100 has no effect, since Arial has no typeface lighter than normal.
If you have removed the italic typeface, then browsers may use normal typeface as slanted (“fake italic”, though it’s not really italic but slanted, in a synthetic way). It should not cause the text to look bold. In the absence of more information (like a description of the font family under the name Arial in the system and some screen shots) it is impossible to analyze the issue further.
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;
}