Как да добавите Google шрифтове към сайта, Оформление на уебсайта

Шрифтове googleapis com CSS семейство предлага три опции за използване на шрифтове на сайта: стандартен, @import и Javascript.

добавите

Вариант 1: Стандартен

Отворете файла header.php и добавете между таговете и код, подобен на този по-долу:

Вариант 2: @import

Вариант 3: Javascript

Трябва да отворите файла header.php и да добавите специален код между таговете.

И така, кой от тези методи е най-добрият?

Начинът по подразбиране за активиране на WebFonts оказва най-малко влияние върху скоростта на сайта. Въпреки че при бавни връзки посетителите на сайта може да видят така наречените „мигания на нестилизиран текст“ (FOUT). Текстът първо ще бъде изобразен с различни шрифтове (напр. семейство CSS шрифтове Arial ) и след това ще се превключи към шрифта на Google, когато се зареди.

Методът @import предотвратява това, но може да забави сайта: браузърът ще изчака шрифта да се зареди, преди да изобрази съдържанието.

Javascript кодът е част от WebFont loader, който е Javascript библиотека, разработена от Google и Typekit. Това ви дава повече контрол върху зареждането на шрифтове. Но вероятно нямате нужда от нивото на контрол, което Javascript ви дава, и е много по-трудно за прилагане.

Въпреки това е препоръчително да оптимизирате сайта, така че да се зарежда възможно най-бързо. Що се отнася до шрифтовете на Google, тяхната оптимизация се извършва, както следва:

  1. Комбиниране на множество шрифтове в една заявка. Можете да направите това със знака "".

Вместо да пише:

  1. Няма нужда да изисквате шрифтове, които не използвате.

Ако не използвате семейство шрифтове Tahoma в CSS, не включвайтенеговият. Някои браузъри зареждат само файловете с шрифтове, необходими за показване на текста на страницата. Но други ще изтеглят всички шрифтове, което ще забави вашия сайт.

Как да използвам шрифтове на сайта?

Досега сме добавяли само шрифтове, за да ги използваме, но те няма да бъдат приложени, докато не посочите къде да се показват.

Отворете файла style.css на вашата тема и добавете следния CSS код към него:

прилагайки го към елементите, към които искате да приложите шрифта. Това може да бъде body таг, ако искате да приложите шрифта към повечето елементи на сайта:

Или, ако искате да приложите семейство шрифтове Googleapis com CSS само към заглавки, можете да добавите следния код:

Запазете файла и го качете на сайта.

Можете също да използвате избрани шрифтове на Google в изображения, за да съответстват на останалата част от вашия сайт.

Тази публикация е превод на статията „КАК ДА ДОБАВЯТЕ GOOGLE ШРИФТОВЕ КЪМ ВАШИЯ УЕБСАЙТ“, изготвена от приятелския екип на проекта Internet technologies.ru