Перейти к основному содержанию

Google Fonts

  1. Перейдите на Google Fonts и выберите понравившийся шрифт.

  2. На странице шрифта найдите и нажмите кнопку Get font.

1

  1. Нажмите Get embed code.

2

  1. Выберите @import.

3

  1. Здесь нам нужно скопировать две части:

4

Часть первая

Для выбранного мной шрифта код встраивания, предоставленный Google, выглядит так:

<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:[email protected]&display=swap');
</style>

Нам нужно скопировать только часть после вопросительного знака в URL (выделена красным на изображении выше) и вставить её в поле Google Fonts (Font families) на странице настроек плагина. В этом примере мне нужно скопировать только family=Noto+Sans+JP:[email protected]&display=swap.

Часть вторая

Для этого шрифта код стиля, предоставленный Google, выглядит так:

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

Нам нужна только часть, выделенная красным на изображении выше.

  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;

Иногда нужно подставить некоторые значения в стили. Например, для этого шрифта значение font-weight — <weight>, что означает, что вам нужно указать значение. Такие заполнители обычно заключены в <>. Соответствующие значения можно найти на Mozilla.

Для font-weight мы можем использовать normal.

  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;

Вставьте это в поле Google Fonts (CSS properties) на странице настроек плагина.

  1. Завершите настройку.

5

  1. Вернитесь на страницу видео, чтобы увидеть применённый шрифт. На изображении ниже показано использование Noto Sans Japanese и Noto Serif Japanese.

6