Как подключить шрифты в css google fonts

How to use Google Fonts in your next web design project

So you’ve probably heard that Google has hundreds of free web fonts ready to be used for your next project. But how do you use them on your website? This article will walk you through the steps to take in order to get them running on your website. It should take less than 10 minutes!

What are Google Fonts?

“Google Fonts first launched in 2010 as an engineering initiative to move the web forward and make it faster.” — Google Design

Google Fonts launched in 2010, quickly becoming the Internet’s largest, free, open-source selection of fonts. All Google Fonts are free for commercial and personal use. The Google Fonts website makes it easy for anyone to quickly select and utilize different fonts for their own design needs.

Who uses Google Fonts?

Everyone does! Graphic designers, UX designers, researchers, developers, web designers, bloggers, social media managers, entrepreneurs, artists, students, teachers, photographers, and many more. I’ve seen Google Fonts used on billboards, posters, presentation decks, wedding invitations, websites, and books.

Who creates the fonts?

Google Fonts collaborates with type designers, type foundries, and the design community all over the world. These people and organizations design the fonts that you see on Google Fonts. For example, Łukasz Dziedzic is an independent typeface designer who designed the popular typeface, Lato. A typeface foundry named ParaType designed the typeface PT Serif.

Why does Google care about fonts?

Every Google Fonts API link on a website gives Google the opportunity to do more data mining. Does that sound gross? Yes, but I don’t think it should stop you from using Google Fonts.

Another more comforting reason Google cares about fonts is because they want to make open-source web fonts accessible to the masses. They want to make a faster, more beautiful web that is easier to navigate and use. They also started Google Fonts back in 2010 when a service like this was much needed, so they solved yet another problem we were having on the Internet. #dontbeevil

Why should I consider using them?

You can’t beat free. Am I right? On top of being free, you should consider using Google Fonts on your next web design project because…

• The fonts are easy to implement on your website
• There are over 850 fonts to choose from (and counting)
• The overall quality of the fonts continues to increase
• Google Fonts are also downloadable for print use

Okay, okay, okay! Now on to how you use them.

How to Use Google Fonts — Step by step

1) Go to the Google Fonts website

Visit the Google Fonts website where you will be able to choose from 853 font families and counting! The website allows you to filter results by font style, languages, popularity, and weight. Google Fonts also features new fonts if you visit the “featured” page.

2) Search for fonts you like

If you have a font family name in mind you can search for it.

3) Click “+” when you are ready to use it

Each font family has a plus button in the upper right hand corner. Click the plus button to add the font family to the “selection drawer” that appears at the bottom of the screen.

4) Repeat steps 1–3 if you are looking for more than one font to use

5) Click the “selection drawer” to show all the fonts you’ve chosen

The “selection drawer” is where you will see all the fonts you’ve added. It’s where you will find the code to add to your website. You also have the option to download the fonts to your desktop.

6) The “selection drawer” is where you will grab the code that you will copy/paste into your websites HTML and CSS code

From the “selection drawer,” you will copy the code to paste in your HTML and CSS. In order for Google Fonts to work on your website, you must have both the font family linked to the Google Fonts API (in the HTML) and you must have the font family specified (in the CSS).

7) Add different font weights and styles if you wish by clicking the “customize” tab

This is your last chance to add different font weights and styles to your font families before adding them to your website. Only add the font weights and styles you know you will need, because the more fonts you add the slower they will load on your site.

8) Copy the HTML code and paste it in your website’s <head>

Alright we are almost done! All we need to do now is copy and paste the HTML and CSS code into your website. First, copy the HTML link into the head of your HTML doc.

9) Copy the CSS rule and paste it in your website’s CSS file

Finally, we also need to copy and paste the CSS rules into your CSS file. If you’re adding one Google Font for your website, you can add the CSS font family rules into your body tag. Otherwise, you will need to be sure you are adding it to the correct elements in your CSS files.

10) Save both files (HTML and CSS) then refresh your website and view the new font

Don’t forget to save and refresh!

There ya go! You have successfully implemented your first Google Font on your website. Congrats, you coder you. It’s fair to say Google Fonts are basically…

More reading

Thanks for reading

Feel free to leave a comment below or reach out to me on Twitter with any questions ✌️

Also, I’m the creator of Font Pair, which helps you pair Google Fonts together. Checkout our new Medium publication to read more typography posts!

Get Started with the Google Fonts API

This guide explains how to use the Google Fonts API to add fonts to your web pages. You don't need to do any programming; all you have to do is add a special stylesheet link to your HTML document, then refer to the font in a CSS style.

A quick example

Here's an example. Copy and paste the following HTML into a file:

Then open the file in a modern web browser. You should see a page displaying the following, in the font called Tangerine:

That sentence is ordinary text, so you can change how it looks by using CSS. Try adding a shadow to the style in the previous example:

You should now see a drop shadow under the text:

And that's only the beginning of what you can do with the Fonts API and CSS.

Overview

You can start using the Google Fonts API in just two steps:

Add a stylesheet link to request the desired web font(s):

Style an element with the requested web font, either in a stylesheet:

or with an inline style on the element itself:

For a list of fonts you can use, see Google Fonts.

Specifying font families and styles in a stylesheet URL

To determine what URL to use in your stylesheet link, start with the Google Fonts API base URL:

Then, add the family= URL parameter, with one or more font family names and styles.

For example, to request the Inconsolata font:

To request multiple font families, separate the names with a pipe character ( | ).

For example, to request the fonts Tangerine, Inconsolata, and Droid Sans:

Requesting multiple fonts allows you to use all of those fonts in your page. (But don't go overboard; most pages don't need very many fonts, and requesting a lot of fonts may make your pages slow to load.)

The Google Fonts API provides the regular version of the requested fonts by default. To request other styles or weights, append a colon ( : ) to the name of the font, followed by a list of styles or weights separated by commas ( , ).

To find out which styles and weights are available for a given font, see the font's listing in Google Fonts.

For each style you request, you can give either the full name or an abbreviation; for weights, you can alternatively specify a numerical weight:

For example, to request Cantarell italic and Droid Serif bold, you could use any of the following URLs:

Use font-display

font-display lets you control what happens while the font is unavailable. Specifying a value other than the default auto is usually appropriate.

Pass the desired value in the querystring display parameter:

Specifying script subsets

Some of the fonts in the Google Font Directory support multiple scripts (like Latin, Cyrillic, and Greek for example). In order to specify which subsets should be downloaded the subset parameter should be appended to the URL.

For example, to request the Cyrillic subset of the Roboto Mono font, the URL would be:

To request the Greek subset of the Roboto Mono font, the URL would be:

To request both Greek and Cyrillic subsets of the Roboto Mono font, the URL would be:

The Latin subset is always included if available and need not be specified. Please note that if a client browser supports unicode-range (http://caniuse.com/#feat=font-unicode-range) the subset parameter is ignored; the browser will select from the subsets supported by the font to get what it needs to render the text.

For a complete list of available fonts and font subsets please see Google Fonts.

Optimizing your font requests

Oftentimes, when you want to use a web font on your website or application, you know in advance which letters you'll need. This often occurs when you're using a web font in a logo or heading.

In these cases, you should consider specifying a text= value in your font request URL. This allows Google to return a font file that's optimized for your request. In some cases, this can reduce the size of the font file by up to 90%.

To use this feature, simply add text= to your Google Fonts API requests. For example if you're only using Inconsolata for the title of your blog, you can put the title itself as the value of text= . Here is what the request would look like:

As with all query strings, you should URL-encode the value:

This feature also works for international fonts, allowing you to specify UTF-8 characters. For example, ¡Hola! is represented as:

Enabling font effects (Beta)

When making headers or display texts on your website, you'll often want to stylize your text in a decorative way. To simplify your work, Google has provided a collection of font effects that you can use with minimal effort to produce beautiful display text. For example:

To use this beta feature, simply add effect= to your Google Fonts API request and add the corresponding class name to the HTML element(s) that you want to affect. In our example above, we used the shadow-multiple font effect, so the request would look like:

To use the effect, add the corresponding class name to your HTML element(s). The corresponding class name is always the effect name prefixed with font-effect- , so the class name for shadow-multiple would be font-effect-shadow-multiple :

You can request multiple effects by separating the effect names with a pipe character ( | ).

Here is a complete listing of all the font effects that we offer:

Note: Some of the font effects (e.g. 3d) do not scale particularly well, and tend to look best when used with larger font sizes. Additionally, you might want to style the fonts further, such as changing the color of the text to match your page.

There are many more ways to style your fonts, and many things are possible through CSS. We are simply providing a few ideas to get you started. For more ideas, try Google searching "css text effects" and browse through many of the ideas that are already on the web!

Further reading

• See a complete list of font families provided by the Google Fonts API on Google Fonts.
• Learn how to use the Web Font Loader to have more control over loading fonts.
• Learn more about how the Google Fonts API works on the Technical Considerations page.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Как подключить гугл шрифты Google Fonts

Недавно, как обычно, просматривал группы во Вклнтакте о веб-дизайне и столкнулся с тем, что многие не то что не используют, а даже не слышали о возможности подключать шрифты для сайта через сервис Google Fonts.

Тут же решил написать заметку в блог, чтобы вы, дорогие читатели, были в курсе об этом замечательном инструменте.

Как подключить гугл шрифты

Конечно, в первую очередь нас интересуют русские шрифты, поэтому заходим на сайт и выбираем во вкладке «Language» Cyrillic или Cyrillic Extended.

Таким образом, мы отфильтровали все шрифты и оставили только русскоязычные. На момент написания статьи кириллических 113, а расширенных кириллических 78.

Далее, во вкладке «Сategories» можно поставить фильтр на отображение шрифтов, которые не имеют засечек, выбрать рукописный и так далее.

Выпадающий список в «Font properties» позволяет задать дополнительные настройки и отфильтровать шрифты по ширине, толщине и другим параметрам, а галочка напротив «Show only variable fonts» позволяет отсеять не вариативные шрифты, в которых не предусмотрены сразу несколько видов толщины, наклона или курсива.

После того, как определились со шрифтом кликайте по нему и вас перебросит на страницу, где можно выбрать какие именно типы вам нужны.

Теперь можете выбрать жирность и курсив, которые необходимы в вашем проекте, кликая по «Select this style». Кстати, если вам нужен еще и другой шрифт, вы может вернуться на шаг назад и подключить его тоже. Нам не предлагают подключать все и сразу, потому что увеличит вес файлов и замедлит загрузку сайта в целом. Поэтому, такая тонкая кастомизация только в плюс.

Если список вас устраивает, то переходите во вкладку Embed. Тут вас ждет дальнейшая инструкция по подключению.

Если вы планируете подключать шрифты в шапке сайта, то разместите между тегами «head» полученную строку. В моем случае это:

Для использования Google Fonts в CSS, у нужного класса или тега нужно указать:

Кроме того, шрифт можно импортировать через CSS. Перейдите во вкладку «@import» и скопируйте предложенную строку в свою таблицу стилей.

Не забывайте, что все импорты из других файлов в CSS нужно делать в начале документа.

Вот и все, теперь вы знаете, как подключить шрифты Google к своему сайту. Если есть вопросы, задавайте их в комментариях.

Конечно, в следующих статьях мы обязательно поговорим о том, как подключить любой нестандартный шрифт, который у вас имеется на сайт поэтому подписывайтесь на обновления в социальных сетях, чтобы не пропустить. А на сегодня все.

8 комментариев

Полезная информация. пару месяцев искала ее назад. Много времени потратила.

Здравствуйте, спасибо за ваш комментарий, впереди еще много интересного, подписывайтесь на rss или twitter чтобы не пропустить новые статьи

А в какой последовательности необходимо подключать шрифт с помощью такой ссылки? Я имею в виду в head содержится много ссылок и как выбрать правильно расположение для данной? Я слышал, что порядок подключения играет роль. Например, все css подключают в начале, а js-файлы в конце.

Сss подключают первыми, так как они отвечают за отображение страницы. Js подключают позже, так как он используется, чаще всего, после того, как отобразилась страничка. Иногда, есть возможность подключить js в конце страницы, как и css, иногда это играет ключевую роль и нельзя. Все зависит от конкретного случая. Шрифт гугл, ну подключите после основного файла стилей. В данном случае это не критично и вы не заметите разницы, где бы не расположили. Но все css подключать до использования js. Все это связано с тем, что команды выполняются синхронно, друг за другом. И если скрипты «Тяжелые» то их загрузка может занять слишком много времени. Поэтому, сначала подключают то, что отвечает за основное оформление, а потом второстепенные функции. Как-то так, надеюсь, что общая картина понятна. Конечно, есть возможность грузить скрипты асинхронно и это ускорит их загрузку, но это уже другая история.

Сергей, если вы используете шрифт в своем файле стилей, то подключать шрифт надо ДО подключения своего файла стилей.

Спасибо, полезная информация, как раз искал — что лучше @import или link для шрифтов. Раньше все время подключал через импорт якобы, чтобы код чище был, а оказывается это влияет на скорость, будем исправлять.

Дуже дякую мені ця статя як веб-розробнику дуже допомогла все детально розписано.

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.

In this snippet, you’ll find two ways of importing Google Fonts. You can use either the CSS @import rule or HTML <link> tag. It’s quite easy to do, but first, we’ll explain how to import the font you want. Google Fonts can generate the code automatically based on the font that you want to add to your webpage. Open Google Fonts and follow these steps:

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

• Use <h1> as a heading tag and write content in a <p> tag.

Add CSS

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

Now, you can see the final code.

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

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:

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