Google Fonts Library

CodeVigyaan is a free education platform offering programming tutorials, study materials, notes, and real project ideas for college student.

Now picture Google Fonts like a big repository of professionally designed fonts, hosted on the internet. Instead of being limited to the “common” fonts such as Arial or Times New Roman—that almost any machine can utilize—you can “check out” these complete typefaces on the fly from Google‘s servers.

Below is the simple, step-by-step way to get them into your CSS.

1. Pick Your Font

First you go to Google font and when you find the font you like for example (Roboto, Open Sans, etc.) and then you choose the styles you like (Light, Bold, Italic, etc.)

Next, Google will give you a bit of code. You have two options for including in your project.

2. The Two Ways to Add Fonts

Option A: The HTML Link (Most Common)

You just add a into the your file. This line instructs the browser to fetch the font immediately. “Cheeky, ask for this font now before you do anything.”

HTML

<—Links to more info—– 1. The artist is called “Bushra Sheikh”, a famous painter from Pakistan. Her work was presented at the Art Lab.

Option B: The CSS @import

However if you want you have everything within your CSS file, you can have them separately importing with the rule @import at the very top of your.css file.

CSS
/ /i.e. at the very top of your CSS file/ /

@import url(‘https://fonts.googleapis.com/css2? family=Roboto: wght@400;700&display=swap’);

3. Using the Font in CSS

When the font is ‘linked’ or ‘imported’, the browser knows what it is. Now you have to tell certain elements to use it by using the font-family property:

CSS
Body { Can be styled to a certain extent with CSS. By default all HTML5 elements are styled to be displayed as block-level elements.

/* First, use ‘Roboto’. If it can‘t find it, “take” the font “any “sans-serif” ”.*/

A font-family of ‘Roboto’, in our case, means that for being displayed in our test by default, we are calling our target font

Font-weight: 400; /* Normal weight */

H1 {

Given the definitions of the function: with this, using the order relationit is easy to prove that: for allvalidby induction. For it holds that: This is enough for anyx, y Z.

Font-weight: 700; //Bold weight

I am interested to know what is the best option. Please, can you give me the name?

Key Terms to Remember

Font Family: Name of the font e.g. “Lato”. Always use doubles quotes if the typeface name contains empty space e.g. “Open Sans”.

Fallback Font where is the font, such as sans-serif. When Google Fonts is unable to load due to slow Internet connection, browser will load the fallback font.

Font Weights: These are stuff like 400, 700(normal, bold). On the Google font picker please make sure you tick the boxes for the weights you want.

Why do we use Google Fonts?

Variety: Thousands of options allowing you to make your site look unique.

Speed: The speed of Google‘s servers is unbelievable.

Compatibility: They works on any browsers and devices.

Pro-Tip: Don‘t include all the weights (100, 200, 300… 900). The more of them you have in your file, the slower your site will be to load. Choose the ones you will use.