Пропускане към основното съдържание

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>: Използвайте уникално и описателно име на клас
// <weight>: Използвайте стойност от 100 до 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