Гугл фонтс шрифты css

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.

Источник

Гугл фонтс шрифты css

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

Источник