Могу ли я использовать google fonts для создания логотипа в коммерческих целях?

➢Загрузка своего шрифта на fontlibrary.org:

Важно: Загружая на fontlibrary.org шрифт, вы позволяете его использовать другим пользователям сервиса. Убедитесь, что ваша лицензия на шрифт позволяет это сделать

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

Название и описание должно быть указано на английском языке.

Категория: serif — шрифт с засечками, sans-serif — без засечек.

Шрифт в формате OTF или TTF должен быть упакован в ZIP-архив. Если у вас нет программы для архивирования, используйте онлайн-сервис. Например, https://sanstv.ru/zip.

Если шрифт корректный, то после нажатия на кнопку «CREATE» появится ссылка на загруженный шрифт, который устанавливается на страницу с помощью переноса кода(1) и названия(2) в наш HTML-виджет.

Включаем нужную опцию в настройках HTML-виджета:

1. Все виджеты «Текст». Шрифт будет у всех виджетов «Текст»

2. Заголовки. Шрифт будет у всех виджетов «Заголовок».

3. Секции и виджеты с классом extfont. У нужных виджетов и секций указываем класс extfont, чтобы применить его для этих элементов страницы. Шрифт отобразится только на опубликованной странице. Не работает для всплывающих окон, если класс указывается у кнопки или у секции, в которой находится кнопка с окном.

4. Весь текст на странице. Выбранный шрифт будет применен для текста во всех виджетах, в том числе и во всплывающих окнах.

На вкладке «Прочие» доступны дополнительные настройки:

Насыщенность. Шрифт может быть жирнее или тоньше обычного начертания.У всех шрифтов поддерживаются значения 400 (обычный вид шрифта) и 700 (жирный шрифт). Чем больше это значение, тем «толще» шрифт.Если выбранное значение не поддерживается, то шрифт будет с ближайшим значением (400 или 700).Запасной шрифт. Если код или название шрифта с ошибками, то будет использован этот шрифт.

Важно: для корректной работы рекомендуется использовать только один такой виджет на странице

Система 3. Два шрифта / тяжёлый & лёгкий

Такая система использует два шрифта без засечек с дополнительной X-высотой и межбуквенными интервалами. Заголовок имеет большой вес, содержание — лёгкий.Пример из жизни: для визуализации данных Reuter в материале «The Rohingya Crisis: Life in the camps» используется комбинация тяжелых и легких шрифтов. Дизайнер использовал фирменную гарнитуру Reuter «Knowledge» для заголовка. Прочая информация использует Source Sans Pro, доступный в библиотеке Google Fonts

Обратите внимание, как «Negative for E. Coli» выделено серым цветом, чтобы привлечь внимание к первым трём показателям

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

Используемые шрифты: PT Sans Bold — сильный округлый шрифт с большой X-высотой. PT Sans и PT Serif были разработаны для русского алфавита как всеобъемлющий шрифт для поощрения печати и чтения на национальной языке. В дополнение к кириллице, PT Sans поддерживает латиницу, греческий, арабский и другие формы. Семейство также включает стиль PT Sans Caption, который был разработан специально для мелкого шрифта и хорошо подходит для длинных заметок или разделов источников.

Содержимое в примере использует шрифт Noto Sans: это чистый шрифт со слегка сжатым межбуквенным интервалом, что компенсируется чёткой круглой апертурой и большой X-высотой. Табличные числа включают в себя прочное число «1» с широкой ножкой, придающую структуре чисел чёткий вид. Noto Sans является частью большого семейства шрифтов Noto. В группе более 100 различных шрифтов с целью обеспечения «визуальной гармонии» на нескольких языках. Это делает Noto Sans особенно хорошим вариантом для многоязычных визуализаций.

Как добавить шрифт в декстопную версию Фигма

Работать с программой можно онлайн на сайте или же установив ее на компьютер. Потому добавление дополнительных вариантов начертаний тоже происходит по-разному. Когда речь идет о декстопной версии программы, то процедура подразумевает следующие шаги:

Установку на компьютере выполняют обычным образом. Например, работая с Windows, для этого можно воспользоваться одним из следующих способов:

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

После этого необходимо перезапустить программу Фигма. Теперь можно работать над проектом с использованием новинки.

Справка! Если нужно добавить несколько начертаний, то можно устанавливать их по очереди или все сразу. В последнем случае их можно выбрать сразу все для копирования в папку Fonts.

Для установки необязательно вносить изменения, относящиеся к системной папке. Можно действовать следующим образом:

Создать папку на компьютере, которая предназначается для добавленных шрифтов.
Поместить туда скачанные файлы.
Открыть панель управления. Сверху справа из выпадающего списка выбирают способ отображения «Мелкие значки».
Ознакомившись со списком разделов, перейти в «Fonts».
С правой стороны находится меню, где нужно выбрать строку «Параметры …».
На открывшейся странице требуется поставить птичку, разрешающие для инсталляции копировать в папку 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 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 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 . Here is what the
request would look like:

https://fonts.googleapis.com/css?family=Inconsolata&text=Hello

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

https://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World

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

https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!

Основные виды лицензий на шрифты

Классическая схема состоит из трёх основных типов шрифтовых лицензий: Desktop, Web и App. Её придерживаются многие шрифтовые студии, а также магазины, которые шрифты продают. Среди них type.today, Letterhead.store, , Fontshop.

Desktop

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

Покупатели шрифтов по лицензии desktop чаще всего получают файлы в формате OTF.

Можно ли использовать шрифт с лицензией Desktop для создания логотипа? К этому студии и магазины относятся по-разному. Например, type.today не берёт за это дополнительной платы, а в Paratype нужно покупать отдельную лицензию «Лого». Такие нюансы обычно прописаны в лицензионном соглашении.

Web

Лицензия Web даёт право использовать шрифт в оформлении сайта. Стоимость определяется трафиком, при этом одни правообладатели оценивают его по количеству просмотров страниц сайта, другие — по числу уникальных посетителей.

После покупки веб-дизайнеры обычно получают шрифт в формате TTF, WOFF, WOFF2 или EOT. Причём его нужно разместить на сервере — устанавливать такой шрифт на компьютер нельзя, для этого нужна лицензия Desktop.

App

Шрифты с такой лицензией можно использовать только в мобильных приложениях.

Стоимость зависит от количества приложений. Paratype и Brownfox считают версии для разных платформ — iOS и Android — одним приложением. Но бывает и по-другому.

Встраивание шрифтов с использованием правила @font-face

Шрифты размещаются на сервере пользователя независимо от внешних сервисов. @font-face — это устаревшее правило CSS2, которое было повторно введено в спецификации CSS3 и поддерживается почти всеми современными браузерами. Веб-шрифт — это настраиваемый шрифт, который поддерживается различными браузерами и доступен в таких форматах, как TTF, WOFF, EOT и SVG.

   @font-face { font-family: 'ChunkFiveRegular'; src: url('Chunkfive-webfont.eot'); src: url('Chunkfive-webfont.eot?#iefix') format('embedded-opentype'), url('Chunkfive-webfont.woff') format('woff'), url('Chunkfive-webfont.ttf') format('truetype'), url('Chunkfive-webfont.svg#ChunkFiveRegular') format('svg'); font-weight: normal; font-style: normal; }

Этот материал переведен на русский язык редакцией Deadsign, официального партнёра Awwwards в России.

Enabling Font Effects

Google have also enabled different font effects that you can use.

First add to the Google API,
then add a special class name to the element that is going to use the special
effect. The class name always starts with
and ends with the .

Example

Add the fire effect to the «Sofia» font:

<head><link rel=»stylesheet»
href=»https://fonts.googleapis.com/css?family=Sofia&effect=fire»><style>body {
font-family: «Sofia», sans-serif; font-size: 30px;}</style></head>
<body><h1 class=»font-effect-fire»>Sofia on
Fire</h1></body>

Result:

Sofia on Fire

To request multiple font effects, just separate the effect names with a pipe character
(), like this:

Example

Add multiple effects to the «Sofia» font:

<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><h1 class=»font-effect-neon»>Neon Effect</h1><h1 class=»font-effect-outline»>Outline
Effect</h1><h1 class=»font-effect-emboss»>Emboss
Effect</h1><h1 class=»font-effect-shadow-multiple»>Multiple
Shadow Effect</h1></body>

Result:

❮ Previous
Next ❯

Немного теории

Цветовой круг или цветовое колесо — это инструмент, позволяющий лучше понять цвет и взаимоотношение между разными цветами. Первую цветовую диаграмму построил еще Исаак Ньютон в 1666 году, и с тех пор ученые и художники создали огромное количество различных вариантов ее исполнения. Многие люди до сих пор спорят, какой из них является самым правильным. На практике у каждой модели есть свои преимущества.

Наиболее распространенным считается колесо, состоящее из 12 цветов. Но также вы можете встретить 6-24-48-96-частные цветовые круги.

Цветовой круг

Каждый цвет, используемый в цветовом круге, имеет свое название.

Основные или первичные цвета (Primary Colors): красный, желтый, синий. Согласно классической теории цвета основные цвета — это три пигментных цвета, которые невозможно получить путем смешивания других цветов. Все остальные цвета являются производными от них и при смешивании дают черный цвет.
Дополнительные или вторичные цвета (Secondary Colours): зеленый, оранжевый, фиолетовый. Эти цвета получаются в результате смешивания двух основных цветов.
Вспомогательные или третичные цвета (Tertiary Colours): желто-оранжевый, красно-оранжевый, красно-фиолетовый, сине-фиолетовый, сине-зеленый и желто-зеленый. Эти цвета образуются при смешивании основного и дополнительного цвета. Именно поэтому их названия состоят из двух слов: сине-зеленый, красно-фиолетовый, желто-оранжевый и т.д.

Также хочется пару слов сказать о таких понятиях, как тон, тень, оттенок и тональность.

Тон — самая чистая или самая яркая форма цвета. Это цвета, не смешанные ни с белым, ни с черным, ни с серым цветами. На цветовом колесе они располагаются по внешнему кругу.

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

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

Тень — смесь тона с черным цветом. Также, как и в случае с белым и серым цветом, черный цвет можно использовать в любом количестве. Тень располагается на самом последнем (внутреннем) круге цветового колеса.

Тон, оттенок, тень, тональность

Гугл фонтс: конечная настройка или как скачать

После предварительного просмотра на гугл фонтс, либо можем скачать, либо настроить вывод скрипта. Нажимаем на кнопку с плюслм и надписью “select this font”, выбрал популярный roboto. Внизу появится всплывающее окно нажимаем и видим инструкции.

Кнопка скачать на компьютер.
Embed вкладка настройки интеграции, custimize доработка (величина и язык).
Советую выбрать standart.
Если решите внедрять на сайте через загрузку с гугл фонтс, то надо вставить код в раздел header.
CSS стиль, который надо прописать к письменным элементам (как сделать смотрите ниже).

Подключить через гугл фонтс

В прошлом разделе нашли код начинающийся с link, чтобы подключить, вставляем в раздел head перед закрывающим тегом.

Пол дела сделали, теперь присоединяем к элементу. Берем второй код и вставляем в файл style.css (если на wordpress, на остальных движках не знаю где).

Ручной метод для сайта

Скачав к себе на компьютер файл, надо закачать его на хостинг. Так выглядит сам файл.Загружаем его в активную тему, для удобства советую сделать папку fonts если ее нет. Так выглядит путь до папки с темой и созданная fonts (закрасил название синим, так как сайт не мой).Далее прописываем название. Можно через стандартный редактор вордпресса, вставляем в любое место кода такого типа.

@font-face {font-family:'Chocolate cyr-lat';src: url('https://ваш домен/wp-content/themes/активная тема/fonts/Chocolatecyr-lat.otf(название)');}

Чтобы было понятнее прилагаю скриншот на русском.Далее к необходимым элементам прописываем стиль. В этом поможет font.В примере я присоединил шрифт с гугл фонтс к блоку luchshie, а именно к элементу p, то есть параграфу. Для данных действий необходимы хоть малейшие знания CSS.
P.S. Видео обзор подробного подключения.

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

Комбинируйте шрифт с засечками и шрифт без засечек, чтобы создать контраст. Чем больше стили шрифтов не похожи друг на друга, тем больше у вас шансов создать удачную пару. Шрифты, которые слишком одинаково выглядят, плохо смотрятся вместе. (Попробуйте совместить Helvetica и Univers, чтобы убедиться на примере, что это плохой вариант). Можно выбрать два шрифта с засечками или два без засечек для создания комбинации только в том случае, если они радикально отличаются друг от друга.

Избегайте выбора шрифтов из одной категории, например, рукописные шрифты или брусковые. (Шрифты Clarendon и Rockwell смотрятся вместе не очень хорошо).

Определите каждому шрифту его задачу и придерживайтесь её.

Попробуйте шрифты из различных категорий, которые имеют одинаковую высоту строчных знаков и ширину глифов. (Например, Futura вместе с Times New Roman смотрятся плохо, потому что у них большая разница между х-высотой и шириной. )

Найдите какие-либо отношения между основными формами. Например, посмотрите на букву «О» в верхнем и нижнем регистре. Круглые и овальные буквы «О» не любят друг друга, поэтому их лучше не сочетать.

Сравните начертание шрифтов: оно должно быть разным. (Например, Didot и Rockwell выглядеть очень плохо вместе по многим причинам, но одна из главных — потому что они оба имеют жирное начертание).

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

Найдите умный способ для создания контраста. Увеличьте трекинг для одного шрифта и проверьте, как смотрится сочетание.
Не пренебрегайте тем, чтобы использовать различные шрифты из одного семейства. Например, можно выбрать Helvetica Black для заголовка и Helvetica normal для основного текста.

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

Не забудьте проверить, как смотрится курсивное начертание каждой гарнитуры. Вы можете получить хорошую комбинацию, а затем обнаружить, что курсивы не сочетаются. Не забывайте об этом!

Попробуйте свои вариации с большим и меньшим количеством текста. Измените количество текста, чтобы проверить, как шрифты смотрятся вместе.

Учите классические шрифты. Распечатайте их и смотрите на них во время обеда. После того как вы выучите все популярные шрифты, подумайте о том, как комбинировать их с другими шрифтами

Так вы сможете быстрее и проще создавать различные пары.

Используйте контраст выразительных и нейтральных шрифтов. Если один шрифт обладает выразительным характером (например, жирным начертанием), сочетайте его с нейтральным шрифтом.

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

Бесплатные шрифты — это палка с двумя концами. Многие бесплатные или дешевые гарнитуры часто пропускают важные символы, проблемы начнутся позже, если вы не позаботитесь об этом заранее.

Используйте не больше 2 гарнитур. Это даст вам до 8 шрифтов для работы: нормальный, полужирный, курсив и полужирный курсив

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

Измените размер кегля. Сочетание шрифтов может не согласоваться, но если вы измените размер одного из шрифтов, всё станет на свои места.

Избегайте смешивания моноширинных шрифтов с пропорциональными шрифтами. Вы можете попробовать это сделать, но не говорите, что мы вас не предупреждали.

Не смешивайте настроение шрифтов. Беззаботный Gill Sans не захочет стоять рядом с деловым Didot, по крайней мере, смотреться вместе они будут плохо. Сочетайте два шрифта с одинаковым или похожим настроением.

Следите за удобочитаемостью шрифта. Комбинации шрифтов должны иметь четкие различия для того, чтобы документ мог хорошо читаться. Если не хватает контраста, визуальная иерархия нарушается, и роли, которые вы назначили различным шрифтам не будут ясны.

Нарушайте правила. Найдите свой уникальный способ. Не бойтесь экспериментировать, но делайте это разумно!

Подробно о подключении Google fonts

Чтобы подключить Google fonts/Google шрифты — нам нужен пример и на его основе и рассмотрим, как же подключать шрифты от , всего есть несколько способов!

Рассмотрим первый вариант:

Для этого нам понадобится сайт, с Google fonts:

После того, как вы нашли подходящий шрифт Google, справа от шрифта ищем — «Select this style» — «выбрать этот стиль» — справа должно показаться окно с параметрами данного шрифта

Нам нужна та часть, где где «link» — и часть, которая касается выбранного стиля: «Hachi Maru Pop»

<link href=»https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&display=swap» rel=»stylesheet»>

Также справа копируем font-family

font-family: «Hachi Maru Pop», cursive;

Подключение Google fonts — №1

Нам нужен какой-то блок, пусть это будет div с текстом внутри.

Ему присвоим какой-то класс — «thenew»

<div class=»thenew»>A a, B b, C c, D d, E e, F f, G g, H h, I i, J j, K k, L l, M m, N n, O o, P p, Q q, R r, S s, T t, U u, V v, W w, X x, Y y, Z z<br>1 2 3 4 5 6 7 8 9 0</div>

Соберем выше приведенный код вместе:

<link href=»https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&display=swap» rel=»stylesheet»>

<style>

.thenew{

font-family: «Hachi Maru Pop», cursive;

width: 90%;

height: 240px;

text-align: center;

font-size: 23px;

color: white;

background: red;

line-height: 61px;

margin: 10px 0;

padding: 5%;

}

</style>

<div class=»new»>A a, B b, C c, D d, E e, F f, G g, H h, I i, J j, K k, L l, M m, N n, O o, P p, Q q, R r, S s, T t, U u, V v, W w, X x, Y y, Z z<br>1 2 3 4 5 6 7 8 9 0</div>

A a, B b, C c, D d, E e, F f, G g, H h, I i, J j, K k, L l, M m, N n, O o, P p, Q q, R r, S s, T t, U u, V v, W w, X x, Y y, Z z1 2 3 4 5 6 7 8 9 0
Второй способ подключить google fonts это — @import. Чтобы продемонстрировать подключение Google шрифтов возьмем другой шрифт.
Для этого нам понадобится — открываем сайт Google fonts. Выбираем шрифт Google, который будем подключать.

Теперь выбираем @import:

<style>
@import url(‘https://fonts.googleapis.com/css2?family=Lobster&display=swap’);
</style>

Второй элемент

font-family: ‘Lobster’, cursive;

Далее нам понадобится какой-то класс в блоке:

<div class=»newclass»>A a, B b, C c, D d, E e, F f, G g, H h, I i, J j, K k, L l, M m, N n, O o, P p, Q q, R r, S s, T t, U u, V v, W w, X x, Y y, Z z<br>1 2 3 4 5 6 7 8 9 0</div>

+ стили…

<style>
@import url(‘https://fonts.googleapis.com/css2?family=Lobster&display=swap’);

.newclass{

font-family: ‘Lobster’, cursive;

width: 90%;

height: 240px;

text-align: center;

font-size: 23px;

color: white;

background: red;

line-height: 61px;

margin: 10px 0;

padding: 5%;

}

</style>

<div class=»newclass»>A a, B b, C c, D d, E e, F f, G g, H h, I i, J j, K k, L l, M m, N n, O o, P p, Q q, R r, S s, T t, U u, V v, W w, X x, Y y, Z z<br>1 2 3 4 5 6 7 8 9 0</div>

A a, B b, C c, D d, E e, F f, G g, H h, I i, J j, K k, L l, M m, N n, O o, P p, Q q, R r, S s, T t, U u, V v, W w, X x, Y y, Z z1 2 3 4 5 6 7 8 9 0
Еще один из способов подключить Google fonts — скачать Google fonts и загрузить на сайт.

После того, как зашли на Google шрифты — ищем кнопку — «Download family»

Подключение Google fonts — №3

Открываем скачанный архив с Google fonts, ищем файл с разрешением шрифтов, в примере — «.ttf»

Подключение Google fonts — №3

Подключаем шрифт + добавляем стили с классом

<style>
@font-face{font-family: sacramento-regular; src: url(//dwweb.ru/__a-data/__all_for_scripts/__fonts/sacramento-regular.ttf); }
.example_2{
font-family: «sacramento-regular», cursive;
width: 90%;
height: 240px;
text-align: center;
font-size: 35px;
color: white;
background: red;
line-height: 61px;
margin: 10px 0;
padding: 5%;
}
</style>

В div располагаем класс и текст:

<div class=»example_2″>A a, B b, C c, D d, E e, F f, G g, H h, I i, J j, K k, L l, M m, N n, O o, P p, Q q, R r, S s, T t, U u, V v, W w, X x, Y y, Z z<br>1 2 3 4 5 6 7 8 9 0</div>

A a, B b, C c, D d, E e, F f, G g, H h, I i, J j, K k, L l, M m, N n, O o, P p, Q q, R r, S s, T t, U u, V v, W w, X x, Y y, Z z1 2 3 4 5 6 7 8 9 0

Пользуйтесь на здоровье! Не забудьте сказать

Теги :подключить шрифт googleкак подключить шрифты google fontsкак подключить google шрифт к сайтуподключить шрифты google fonts к сайтукак подключить шрифты в css googleподключить шрифт к сайту css googleкак подключить шрифты в css google fontsкак подключить шрифты через google fontsgoogle fonts как подключитькак подключить шрифты google fontsкак подключить google fonts к сайтуподключить шрифты google fonts к сайтукак подключить google fonts в cssкак подключить шрифты в css google fontsgoogle fonts как подключить htmlкак подключить шрифты через google fonts

01.09.2021

Форма пока доступна только админу… скоро все заработает…надеюсь…