Google font css selector

How to Import Google Fonts in CSS File

An essential part of any design is the chosen font. Google Fonts is a free service of web fonts that allows us to use a large variety of fonts in our CSS file.

1. Find the font and click it (a card with the font), then, click «+ Select this style». On the right side, you’ll see a container with the name «Selected family».
2. Click «Embed» and choose or @import depending on where you need to add the font (in HTML or CSS).
3. Copy/paste the codes you need.

First, we’ll demonstrate an example with the @import rule.

Create HTML

h1>Lorem Ipsum h1> p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. p>

Add CSS

• Import the “Muli” and “Quicksand” Google Fonts for the and , respectively.
• Specify the font-family for each of the elements ( and ).
• Style the two elements separately using the following properties: color, font-weight, font-style, font-size, line-height, letter-spacing, and other properties.

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); @import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap'); body < font-family: 'Muli', sans-serif; color: rgba(0, 0, 0, 0.8); font-weight: 400; line-height: 1.58; letter-spacing: -.003em; font-size: 20px; padding: 70px; > h1 < font-family: 'Quicksand', sans-serif; font-weight: 700; font-style: normal; font-size: 38px; line-height: 1.15; letter-spacing: -.02em; color: rgba(0, 0, 0, 0.8); -webkit-font-smoothing: antialiased; >

Now, you can see the final code.

Example of importing two Google Fonts with the @import rule:

html> html> head> title>Title of the document title> style> @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); @import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap'); body < font-family: 'Muli', sans-serif; color: rgba(0, 0, 0, 0.8); font-weight: 400; line-height: 1.58; letter-spacing: -.003em; font-size: 20px; padding: 70px; > h1 < font-family: 'Quicksand', sans-serif; font-weight: 700; font-style: normal; font-size: 38px; line-height: 1.15; letter-spacing: -.02em; color: rgba(0, 0, 0, 0.8); -webkit-font-smoothing: antialiased; > style> head> body> h1>Lorem Ipsum h1> p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. p> body> html>

In the example above, we imported only two Google Fonts. They must always be the first line in the CSS file. It isn’t recommended to import too many fonts so as to provide better loading speed.

Let’s see another easier example where we import only one font.

Example of importing a Google Font with the @import rule:

html> html> head> title>Title of the document title> style> @import url('https://fonts.googleapis.com/css2?family=Lora&display=swap'); h1 < font-family: 'Lora', serif; color: #000000; text-align: center; > style> head> body> h1>Lorem Ipsum h1> body> html>

It is also possible to import Google Fonts using the HTML tag. You must add it to the header.

Example of importing Google Fonts with the tag:

html> html> head> title>Title of the document title> link href="https://fonts.googleapis.com/css?family=Dosis&display=swap" rel="stylesheet"> style> h1 < font-family: 'Dosis', sans-serif; color: #777777; text-align: center; > style> head> body> h1>Lorem Ipsum h1> body> html>

How to use google fonts, and comply with privacy policy rules?

You can use Google Fonts without importing them from the Google Fonts URL by using the @font-face rule. This method allows you to download the font files and host them on your own server, so you can comply with privacy policy rules in your country.

Here’s an example of how to use Google Fonts with @font-face in a separate CSS file:

1. Go to the Google Fonts website (https://fonts.google.com/) and choose the font you want to use.
2. Click on the «Select This Font» button to add the font to your collection.
3. In the collection drawer that appears at the bottom of the page, click on the «Customize» button to select the font styles and character sets you want to use.
4. Once you’ve made your selections, click on the «Embed» tab to view the code you need to add to your CSS file.
5. Copy the @font-face rule from the code and paste it into your CSS file. Here’s an example:

/* Import the font using @font-face */ @font-face < font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local('Open Sans Regular'), local('OpenSans-Regular'), url('/fonts/OpenSans-Regular.ttf') format('truetype'); > /* Use the font in your CSS */ body < font-family: 'Open Sans', sans-serif; >

In this example, we’re importing the Open Sans font using the @font-face rule. The font is being downloaded from the URL «/fonts/OpenSans-Regular.ttf» on our own server, but you can host it anywhere you like. We’re also specifying a local font name, which will be used if the font is already installed on the user’s computer. Finally, we’re using the font in the body of our CSS.

Note that you’ll need to include the font file on your server and change the URL in the @font-face rule to point to the correct location.

Источник

Google font css selector

Learn Latest Tutorials

Preparation

Trending Technologies

B.Tech / MCA

Javatpoint Services

JavaTpoint offers too many high quality services. Mail us on h[email protected], to get more information about given services.

• Website Designing
• Website Development
• Java Development
• PHP Development
• WordPress
• Graphic Designing
• Logo
• Digital Marketing
• On Page and Off Page SEO
• PPC
• Content Development
• Corporate Training
• Classroom and Online Training
• Data Entry

Training For College Campus

JavaTpoint offers college campus training on Core Java, Advance Java, .Net, Android, Hadoop, PHP, Web Technology and Python. Please mail your requirement at [email protected].
Duration: 1 week to 2 week

Like/Subscribe us for latest updates or newsletter

Источник

How to Use Google Fonts in HTML and CSS

There are numerous fonts available in HTML and CSS but if you are not satisfied with the standard HTML/CSS fonts and opt for some new, fresh and latest fonts then you can use google fonts. Google font is google’s online library that allows us to use different font families through CDN (acronym of content delivery network) which is free to use for everyone.

This write-up will guide you in the following aspects regarding the google fonts:

Step by Step guide for Google Fonts

In order to use the google fonts you have to follow the following steps:

First Step
Visit the Google fonts official website and the following window will appear:

Second Step
Select the category/ font family of your choice:

Third Step
Select the google font of your choice(e.g. quintessentia):

Now click on the “select this style”:

Fourth Step
Copy the link of the selected style from the window that appear on the right side of the screen:

Paste the link in the head section of the HTML document:

Fifth Step
Copy the CSS rules for font-family

And paste it in the CSS file:

We want to apply the style on the

element so we paste it in the p selector. Now we will get the following output:

The output shows that the a google font “Quintessential” is implemented on the

element successfully.

How to use various Google Fonts

All the procedure will be same, select the multiple google fonts, copy the link and paste it in the HTML file’s head section:

Now we select two different google fonts i.e. “Comforter”, and “Open sans”, we want to use “Comforter” for the element and “Open sans” for the

elements. So, our CSS will look like this:

In the CSS file, paste the CSS rules in element selectors to style them according to the choice. It will yield the following output:

Output proves that the CSS rules are implemented successfully on the HTML elements.

How to style Google Fonts

With the help of CSS properties we can style the google fonts according to our choice, our HTML file will remain the same and CSS file will look like this:

h3 {
font-family : ‘Comforter’ , cursive ;
color : red ;
text-shadow : 5px 5px 5px #83647e ;
}
p {
font-family : ‘Open Sans’ , sans-serif ;
color : red ;
text-shadow : 5px 5px 5px #83647e ;
}

The output of the above-given snippet will appear like this:

Conclusion

To add google fonts, search for the google fonts, select the font category and family, then select the font style of your choice. Once you select the font, “copy the font link”, from the “selected families windows” and paste it in the head section of the HTML file. Next, copy the “CSS rules for fonts’ link” and paste it into the CSS selector. Styling can be added to the google fonts using the CSS properties.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.

Источник

Overview

How to use Google Fonts with Next.js or React-App. Example uses the template CSS module for both a downloaded TTF file and Google Font API.

Download the Google Font TTF Files

From https://fonts.google.com/ download the the fonts you want to use. For this example we will use

Download the following:

Put the files under ‘./public/fonts/‘ in Next.js.

CSS Module – Downloaded TTF Files

Define the Font Face

Using CSS @font-face to make the new font accessible. Name the font-family and local() with an identifier to be referenced in CSS.

@font-face < font-family: 'Smooch'; src: local('Smooch'), url('/fonts/Smooch/Smooch-Regular.ttf') format('truetype'), >@font-face < font-family: 'Pacifico'; src: local('Pacifico'), url('/fonts/Pacifico/Pacifico-Regular.ttf') format('truetype'), >@font-face < font-family: 'Monoton'; src: local('Monoton'), url('/fonts/Monoton/Monoton-Regular.ttf') format('truetype'), >

Create the CSS Selector(s)

Create a file under the styles folder labeled fonts.module.scss or fonts.module.css .

For each font, create a unique CSS style.
The examples below are different sizes and colors.

.smoochFont < font-family: 'Monoton'; font-size: 48px; color: darkblue; align-items: center; justify-content: center; >.monotonFont < font-family: 'Anton'; font-size: 36px; >.pacificoFont

Source for the entire ‘ .\styles\fonts.module.css ‘

@font-face < font-family: 'Smooch'; src: local('Smooch'), url('/fonts/Smooch/Smooch-Regular.ttf') format('truetype'), >@font-face < font-family: 'Pacifico'; src: local('Pacifico'), url('/fonts/Pacifico/Pacifico-Regular.ttf') format('truetype'), >@font-face < font-family: 'Monoton'; src: local('Monoton'), url('/fonts/Monoton/Monoton-Regular.ttf') format('truetype'), >.smoochFont < font-family: 'Monoton'; font-size: 48px; color: darkblue; align-items: center; justify-content: center; >.monotonFont < font-family: 'Anton'; font-size: 36px; color: darkred; >.pacificoFont

Using Google Font API

Import the Font from Google

Using CSS @import to make the new font accessible.

@import url('https://fonts.googleapis.com/css?family=Smooch'); @import url('https://fonts.googleapis.com/css?family=Pacifico'); @import url('https://fonts.googleapis.com/css?family=Monoton');

Create the CSS Selector(s)

Note: If the font name has a space like ‘ Odibee Sans ‘ then type it out as is with the space.

@import url('https://fonts.googleapis.com/css?family=Odibee Sans'); .odibeeSansFont < font-family: 'Odibee Sans'; font-size: 48px; >

For each font, create a unique CSS style block.
The examples below are different sizes and colors.

.smoochFont < font-family: 'Monoton'; font-size: 48px; color: darkblue; align-items: center; justify-content: center; >.monotonFont < font-family: 'Anton'; font-size: 36px; >.pacificoFont

Import CSS Module to a Page

Using Fonts on a Page

Import the style from the ‘ ./styles/Fonts.module.css ‘

import style from '@/styles/Fonts.module.scss' . 
> Your Text Goes Here
 

You should see the following for the Smooch font

Conclusion

These are just a few fonts you can add to your Next.js application. Check out Google Fonts collection for yourself here. Google also shows the top fonts that are used if you type the word “top google fonts”.

The top 8 fonts used below were taken directly from Google Search on October 2022.

1. Roboto. Roboto. …
2. Open Sans. Open Sans. …
3. Lato. Lato. …
4. Montserrat. Monstserrat. …
5. Oswald. Oswald. …
6. Source Sans Pro. Source Sans Pro. …
7. Slabo 27px/13px. Slabo. …
8. Raleway. Raleway.

Источник