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
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:
| Style | Specifiers |
|---|---|
| italic | italic or i |
| bold | bold or b or a numerical weight such as 700 |
| bold italic | bolditalic or bi |
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:
| Effect | API Name | Class Name | Support |
|---|---|---|---|
| Anaglyph | anaglyph | font-effect-anaglyph | Chrome, Firefox, Opera, Safari |
| Brick Sign | brick-sign | font-effect-brick-sign | Chrome, Safari |
| Canvas Print | canvas-print | font-effect-canvas-print | Chrome, Safari |
| Crackle | crackle | font-effect-crackle | Chrome, Safari |
| Decaying | decaying | font-effect-decaying | Chrome, Safari |
| Destruction | destruction | font-effect-destruction | Chrome, Safari |
| Distressed | distressed | font-effect-distressed | Chrome, Safari |
| Distressed Wood | distressed-wood | font-effect-distressed-wood | Chrome, Safari |
| Emboss | emboss | font-effect-emboss | Chrome, Firefox, Opera, Safari |
| Fire | fire | font-effect-fire | Chrome, Firefox, Opera, Safari |
| Fire Animation | fire-animation | font-effect-fire-animation | Chrome, Firefox, Opera, Safari |
| Fragile | fragile | font-effect-fragile | Chrome, Safari |
| Grass | grass | font-effect-grass | Chrome, Safari |
| Ice | ice | font-effect-ice | Chrome, Safari |
| Mitosis | mitosis | font-effect-mitosis | Chrome, Safari |
| Neon | neon | font-effect-neon | Chrome, Firefox, Opera, Safari |
| Outline | outline | font-effect-outline | Chrome, Firefox, Opera, Safari |
| Putting Green | putting-green | font-effect-putting-green | Chrome, Safari |
| Scuffed Steel | scuffed-steel | font-effect-scuffed-steel | Chrome, Safari |
| Shadow Multiple | shadow-multiple | font-effect-shadow-multiple | Chrome, Firefox, Opera, Safari |
| Splintered | splintered | font-effect-splintered | Chrome, Safari |
| Static | static | font-effect-static | Chrome, Safari |
| Stonewash | stonewash | font-effect-stonewash | Chrome, Safari |
| Three Dimensional | 3d | font-effect-3d | Chrome, Firefox, Opera, Safari |
| Three Dimensional Float | 3d-float | font-effect-3d-float | Chrome, Firefox, Opera, Safari |
| Vintage | vintage | font-effect-vintage | Chrome, Safari |
| Wallpaper | wallpaper | font-effect-wallpaper | Chrome, Safari |
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.
CSS Google шрифты
Если вы не хотите использовать какие-либо стандартные шрифты в HTML, вы можете использовать Google шрифты.
Google шрифты можно использовать бесплатно, и вы можете выбрать из более 1000 шрифтов.
Как использовать Google шрифты
Просто добавьте ссылку на специальную таблицу стилей в разделе <head>, а затем обратитесь к шрифту в CSS.
Пример
Здесь мы используем шрифт под названием "Sofia" из Google шрифтов:
Sofia Font
Lorem ipsum dolor sit amet.
Пример
Здесь мы используем шрифт под названием "Trirong" из Google шрифтов:
Trirong Font
Lorem ipsum dolor sit amet.
Пример
Здесь мы используем шрифт под названием "Audiowide" из Google Fonts:
Audiowide Font
Lorem ipsum dolor sit amet.
Примечание: При указании шрифта в CSS всегда указывайте хотя бы один резервный шрифт (чтобы избежать неожиданного поведения). Т.о., необходимо добавить общее семейство шрифтов (например, serif или sans-serif) в конец списка.
Чтобы просмотреть список всех доступных Google шрифтов, посетите учебник Google шрифты на нашем сайте W3Schools на русском.
Использование нескольких Google шрифтов
Чтобы использовать несколько Google шрифтов, просто разделите имена шрифтов вертикальной чертой ( | ), как здесь:
Пример
Запросить несколько шрифтов:
Audiowide Font
Sofia Font
Trirong Font
Примечание: Запрос нескольких шрифтов может замедлить работу ваших веб-страниц! Так что будьте осторожны с этим.
Стилизация Google шрифтов
Конечно, вы можете стилизовать Google шрифты по своему усмотрению с помощью CSS!
Пример
Стиль шрифта "Sofia":
Sofia шрифт
Lorem ipsum dolor sit amet.
Включение эффектов шрифта
Google также включил различные эффекты шрифтов, которые вы можете использовать.
Сначала добавьте effect=effectname к Google API, затем добавьте имя специального класса к элементуe, который будет использовать специальный эффект. Имя класса всегда начинается с font-effect- и заканчивается с effectname .
Пример
Добавьте эффект огня к шрифту "Sofia":
София в огне
Чтобы запросить несколько эффектов шрифта, просто разделите имена эффектов вертикальной чертой ( | ), как здесь:
Пример
Добавьте несколько эффектов к шрифту "Sofia":
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body <
font-family: "Sofia", sans-serif;
font-size: 30px;
>
</style>
</head>
<body>
Неоновый эффект
Эффект контура
Эффект тиснения
Эффект множественной тени
Примечание. Google шрифты будут работать, только если вы подключены к Интернету.
Все Google шрифты доступны на сайте Google по ссылке https://fonts.google.com/.
ПАЛИТРА ЦВЕТОВ
ПРИСОЕДИНЯЙТЕСЬ!
Получите ваш
Сертификат сегодня!
Связь с админом
Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:
Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты
Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.
Sorry, you have been blocked
This website is using a security service to protect itself from online attacks. The action you just performed triggered the security solution. There are several actions that could trigger this block including submitting a certain word or phrase, a SQL command or malformed data.
What can I do to resolve this?
You can email the site owner to let them know you were blocked. Please include what you were doing when this page came up and the Cloudflare Ray ID found at the bottom of this page.
Cloudflare Ray ID: 7d6fb1af6e642492 • Your IP: Click to reveal 88.135.219.175 • Performance & security by Cloudflare