Как да използвате Google Fonts в следващия си проект за уеб дизайн

Така че вероятно сте чували, че Google има стотици безплатни уеб шрифтове, готови да бъдат използвани за следващия ви проект. Но как ги използвате на вашия уебсайт? Тази статия ще ви преведе през стъпките, които трябва да предприемете, за да ги пуснете на вашия уебсайт. Трябва да отнеме по-малко от 10 минути!

Какво представляват шрифтовете на Google?

„Google Fonts стартира за първи път през 2010 г. като инженерна инициатива за придвижване на мрежата напред и за по-бърза работа.“ - Google Design

Google Fonts стартира през 2010 г., като бързо се превърна в най-голямата безплатна селекция от шрифтове в Интернет с отворен код. Всички шрифтове на Google са безплатни за търговска и лична употреба. Уебсайтът на Google Fonts улеснява всеки, който бързо избира и използва различни шрифтове за собствените си дизайнерски нужди.

Кой използва Google шрифтове?

Всеки го прави! Графични дизайнери, UX дизайнери, изследователи, разработчици, уеб дизайнери, блогъри, мениджъри на социални медии, предприемачи, художници, студенти, учители, фотографи и много други. Виждал съм Google Fonts, използван на билбордове, плакати, палуби за презентации, покани за сватба, уебсайтове и книги.

Кой създава шрифтовете?

Google Fonts си сътрудничи с дизайнери на шрифтове, леярни за шрифтове и дизайнерска общност по целия свят. Тези хора и организации проектират шрифтовете, които виждате в Google Fonts. Например, kasukasz Dziedzic е независим дизайнер на шрифтове, който е проектирал популярния шрифт Lato. Леярна за шрифтове на име ParaType проектира шрифта PT Serif.

Защо Google се грижи за шрифтовете?

Всяка връзка към приложния програмен интерфейс (API) на Google Fonts в даден уебсайт дава възможност на Google да извършва повече извличане на данни. Звучи ли грубо? Да, но не мисля, че това трябва да ви попречи да използвате Google Fonts.

Друга по-утешителна причина, поради която Google се грижи за шрифтовете, е, че те искат да направят уеб шрифтовете с отворен код достъпни за масите. Те искат да направят по-бърза, по-красива мрежа, която да е по-лесна за навигация и използване. Те също така стартираха Google Fonts през 2010 г., когато услуга като тази беше много необходима, така че те решиха още един проблем, който имахме в интернет. #dontbeevil

Защо трябва да обмислям използването им?

Не можете да победите на свобода. Прав ли съм? Освен че сте безплатни, трябва да помислите да използвате Google Fonts за следващия си проект за уеб дизайн, защото ...

  • Шрифтовете са лесни за прилагане на вашия уебсайт
  • Има над 850 шрифта за избор (и броене)
  • Общото качество на шрифтовете продължава да се повишава
  • Google Fonts също могат да се изтеглят за печат

Добре, добре, добре! Сега за това как ги използвате.

Как да използваме Google шрифтове - стъпка по стъпка

1) Отидете на уебсайта на Google Fonts

Посетете уебсайта на Google Fonts, където ще можете да избирате от 853 семейства шрифтове и да броите! Уебсайтът ви позволява да филтрирате резултатите по стил на шрифта, езици, популярност и тегло. Google Fonts предлага и нови шрифтове, ако посетите страницата „Featured“.

2) Потърсете шрифтове, които харесвате

Ако имате предвид фамилното име на шрифт, можете да го потърсите.

3) Щракнете върху „+“, когато сте готови да го използвате

Всяко семейство шрифтове има бутон плюс в горния десен ъгъл. Щракнете върху бутона плюс, за да добавите семейството шрифтове към „чекмеджето за избор“, което се появява в долната част на екрана.

4) Повторете стъпки 1–3, ако търсите повече от един шрифт, който да използвате

5) Щракнете върху „чекмеджето за избор“, за да покажете всички шрифтове, които сте избрали

„Чекмеджето за избор“ е мястото, където ще видите всички шрифтове, които сте добавили. Там ще намерите кода, който да добавите към уебсайта си. Също така имате възможност да изтеглите шрифтовете на вашия работен плот.

6) „Чекмеджето за избор“ е мястото, където ще вземете кода, който ще копирате / поставите в HTML и CSS кода на вашите уеб сайтове

От „чекмеджето за избор“ ще копирате кода, който да поставите във вашия HTML и CSS. За да може Google Fonts да работи на вашия уебсайт, трябва да имате както семейството на шрифтовете, свързано с API на Google Fonts (в HTML), така и семейството на шрифтовете, посочено (в CSS).

7) Добавете различни тегла и стилове на шрифта, ако желаете, като щракнете върху раздела „персонализиране“

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

8) Копирайте HTML кода и го поставете във вашия уебсайт

Добре, почти сме готови! Всичко, което трябва да направим сега, е да копираме и поставим HTML и CSS кода във вашия уебсайт. Първо копирайте HTML връзката в главата на вашия HTML документ.

9) Копирайте правилото CSS и го поставете във CSS файла на вашия уебсайт

И накрая, ние също трябва да копираме и поставим правилата на CSS във вашия CSS файл. Ако добавяте един шрифт на Google за уебсайта си, можете да добавите правилата за семейство шрифтове CSS в маркера на тялото си. В противен случай ще трябва да сте сигурни, че го добавяте към правилните елементи във вашите CSS файлове.

10) Запазете двата файла (HTML и CSS), след това опреснете уебсайта си и прегледайте новия шрифт

Не забравяйте да запазите и освежите!

Ето ти! Успешно внедрихте първия си шрифт Google на вашия уебсайт. Поздравления, кодирате ви. Справедливо е да се каже, че Google Fonts са основно ...

Повече четене

  • „Преосмисляне на Google Fonts“ от Yuin Chien (Google Design)
  • „6 съвета за по-добро сдвояване на шрифта“ от Hayden Mills (Шрифт чифт)
  • „Избор на уеб шрифтове: Ръководство за начинаещи“ от Google Fonts

Благодаря за четенето

Чувствайте се свободни да оставите коментар по-долу или да се свържете с мен в Twitter с въпроси ✌️

Също така, аз съм създателят на Font Pair, който ви помага да сдвоявате Google Fonts заедно. Разгледайте новата ни публикация Medium, за да прочетете още публикации за типография!