Specifying Style and Weight for Google Fonts

Specifying Style and Weight for Google Fonts

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'>

using different font weight of the same google font in css

Use the font-weight property

http://www.w3schools.com/cssref/pr_font_weight.asp

Example:

p.normal {
    font-weight: normal;
}

p.thick {
    font-weight: bold;
}

p.thicker {
    font-weight: 900;
}

how to specify which font to use in googlefonts with css

Your HTML and CSS is correct. You only need to add the font-weight to make sure you can use specific font weight for your chosen font.

styles.css

#section1_text1 {
  font-family: "Montserrat", sans-serif;
  font-weight: 200;
}

#section1_text2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
}

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/test/styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400&display=swap" rel="stylesheet">
    <title>Document</title>
</head>

<body>
    <main>
        <div id="section1">
            <h3 id="section1_text1">Almost before we knew it, we had left the ground.</h3>
            <h2 id="section1_text2">Agile Way Of Development</h2>
        </div>
    </main>
</body>

</html>

Google font locally with different weights but with the same name

Even though the font files are different, you don't need to set a different font-family for each variation of the font. You can just set one font-family, and specify the different variations in the different @font-face properties.

You should define each @font-face with the same font-family name, like so:

@font-face {
    font-family: 'Opens Sans';
    src: url("/fonts/OpenSans-Regular.ttf");
    font-style: normal;
    font-weight: 400;
}
@font-face {
    font-family: 'Opens Sans';
    src: url("/fonts/OpenSans-Italic.ttf");
    font-style: italic;
    font-weight: 400;
}
@font-face {
    font-family: 'Opens Sans';
    src: url("/fonts/OpenSans-Bold.ttf");
    font-style: normal;
    font-weight: 600;
}

Note that each different font file has a separate @font-face with different properties that correspond to the specific font file, but they have the same font-family. You can then use the font in your css like so:

body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}
.bold {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
}
.italic {
    font-family: 'Open Sans', sans-serif;
    font-style: italic;
}

The other properties in your css classes (font-weight, font-style, etc) will determine which @font-face is used.

What are all the font weights available for google fonts?

It depends on the font. If you are at Google Fonts and you select a font. Then select the family selected in the bottom right, then click the tab that says customize you can see all the font weights that the font will support.

Your current example is exactly how it will look if those font weights are supported. Here is roboto with all the possible font weights and styles.

@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');

The i stands for italic

To use these fonts you then do

.this-is-my-class {
    font-family: 'Roboto';
    font-weight:100; // or 100 - 900
    font-style: italic; // or normal 
 }

Import google font but specific font weight is not included

you may try this link :

<link href='https://fonts.googleapis.com/css?family=Rubik:500,500i' rel='stylesheet'>

By the way when you open the link https://fonts.googleapis.com/css?family=Rubik:500,500i in your browser you can see the styles that are included.

And when you don't specify anything you will only get the regular one (font-weight:400)

All the possibilties for this font are : 300,300i,400,400i,500,500i,700,700i,900,900i

Are weights necessary when importing google fonts?

Yes, they are required if you want to use them.

If you do directly to the following URL (the one you used as an example).

http://fonts.googleapis.com/css?family=Roboto

You'll see something like so...

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v15/oMMgfZMQthOryQo9n22dcuvvDin1pK8aKteLpeZ5c0A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

However if you add the weights to it, you see this...

[...]

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(http://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfZBw1xU1rKptJj_0jans920.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v15/oMMgfZMQthOryQo9n22dcuvvDin1pK8aKteLpeZ5c0A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

[...]

If you don't specify the weights at the end of the URL, if you try and use the font and set a custom weight (anything other than 400) then it simply will fallback to the default weight and the font won't change.

So if you intend to only use the 400 weight, then leave them, but if you want to use thin and bold versions as well, you need to include them in the URL. Including extra weights will increase font load times though, so only include what you intend on using.

How to make font-feature-settings work with Google fonts

Your @font-face rule has some errors:

The url argument expects an actual font file URL like

"fonts.gstatic.com/s/sourcesanspro/v2/...fontfileName.woff2"

Update: Get file URLs from css URL

https://fonts.googleapis.com/css2?family=Source+Sans+Pro

Will return a css containing several @font-face rules for different styles/weights.

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2');
}

Unfortunately, by default google fonts will return the most modern font format supported by your browser – quite likely woff2.

Besides, these font files won't include font-features (as commented here).

How to get the complete font (including all glyphs and features)

  • Other CDNs provide the complete font like jsDelivr in all available formats
  • Download the whole font family in google fonts UI via "Download family" button (e.g Source Sans Pro)

Drawbacks

These files will be way bigger in file size.

If your application does not necessarily need truetype, you should at least switch to the smaller woff2 format.

Updated example

(Compare the lowercase g glyphs)

@font-face {
  font-family: "SourceSansProFeat";
  src: url("https://cdn.jsdelivr.net/npm/source-sans-pro@3.6.0/TTF/SourceSansPro-Regular.ttf")
    format("truetype");
  font-style: normal;
  font-stretch: normal;
  font-weight: 400;
}

@font-face {
  font-family: "SourceSansProFeat";
  src: url("https://cdn.jsdelivr.net/npm/source-sans-pro@3.6.0/TTF/SourceSansPro-Bold.ttf")
    format("truetype");
  font-style: normal;
  font-stretch: normal;
  font-weight: 700;
}

body {
  font-family: "SourceSansProFeat";
}

h1,
.h1 {
  font-style: normal;
  font-stretch: normal;
  font-weight: 700;
  line-height: 1.13;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.feature {
  -webkit-font-feature-settings: "ss01" on, "ss02" on, "ss03" on;
  font-feature-settings: "ss01" on, "ss02" on, "ss03" on;
}
<h1 class="feature">Hamburglefons (alternate glyphset)</h1>
<h1>Hamburglefons (standard glyphs)</h1>
<p>Quick brown fox jumps over the lazy dog <span class="feature">dog</span></p>

Related Topics

Transparent Rounded Corners on Google Map

Proper SCSS Asset Structure in Rails

Changing Chunk Background Color in Rmarkdown

Is There Any Pros and Cons If I Use Always CSS Class Instead CSS Id for Everything

Why Does Clip-Path (And Other Properties) Affect the Stacking Order (Z-Index) of Elements Later in Dom

How to Decrease Image Brightness in CSS

How to Stop Jquery Mobile to Apply Styles to My Specific Form Elements

CSS Id VS Class

How to Style Menu Button and Menu Items

Responsive Clip-Path with Inline Svg

How to Apply Multiple Transform Declarations to One Element

Max-Width VS. Min-Width

How to Hide Scrollbar in Firefox

CSS Text Justify with Letter Spacing

Border Within Border CSS

Bootstrap: Position of Dropdown Menu Relative to Navbar Item

Remove Border Radius from Select Tag in Bootstrap 3

Sass CSS: Target Parent Class from Child


Leave a reply



Submit