Урок 6. Set the Font Family of an Element връзка>>
Можете да зададете точно определен шрифт на текста чрез свойството font-family.
Ако искате да приложите на h2 елемент фонт шрифт sans-serif трябва да използвате следния CSS: 
Натиснете Run tests бутона. Ако сте работили добре, преминавате на следващата стъпка:
h2 {
font-family: sans-serif;
}
Задачата е: Направете всички p елементи със шрифт monospace.
Натиснете Run tests бутона. Ако сте работили добре, преминавате на следващата стъпка:
Урок 7. Import a Google Font
В допълнение към често срещаните шрифтове, които се намират в повечето операционни системи, можем също да посочим нестандартни, персонализирани уеб шрифтове за използване в нашия уебсайт. В Интернет има много източници за уеб шрифтове. За този пример ще се съсредоточим върху библиотеката на Google Fonts.
Google Fonts е безплатна библиотека от уеб шрифтове, които можете да използвате във вашия CSS, като се позовавате на URL адреса на шрифта.
Така че, нека продължим, като импортираме и прилагожим шрифт от Google (обърнете внимание, че ако Google е блокиран във вашата страна, ще трябва да пропуснете това предизвикателство).
За да импортирате шрифт на Google, можете да копирате URL адреса на шрифта от библиотеката на Google Fonts и след това да го поставите във вашия HTML. За това предизвикателство ще импортираме шрифта Lobster. За да направите това, копирайте следния кодов фрагмент и го поставете в горната част на редактора на кода (преди елемента за отваряне на стил):
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
Сега можете да използвате шрифта Lobster във вашия CSS, като използвате Lobster като FAMILY_NAME, както е в следния пример:
font-family: FAMILY_NAME, GENERIC_NAME;
GENERIC_NAME е по избор и е резервен шрифт, в случай че другият посочен шрифт не е наличен. Това е разгледано в следващото предизвикателство.
Фамилните имена са чувствителни към малки и големи букви и трябва да бъдат обвити в кавички, ако има интервал в името. Например, имате нужда от кавички, за да използвате шрифта „Open Sans“, но не и да използвате шрифта Lobster.
Задачата е: Импортирайте шрифта Lobster във вашата уеб страница. След това използвайте селектор на елементи, за да зададете Lobster като семейство шрифтове за вашия h2 елемент.
Урок 8. Specify How Fonts Should Degrade
Има няколко шрифта по подразбиране, които са налични във всички браузъри. Те включват monospace, serif и sans-serif.
Когато един шрифт не е наличен, можете да кажете на браузъра да "degrade/се разпадне" на друг шрифт.
Например, ако искате даден елемент да използва шрифта Helvetica, и да се разпадне на шрифта sans-serif, ако Helvetica не се поддържа от браузера, можете да използвате този CSS стил:
p {
font-family: Helvetica, sans-serif;
<}
Имената на родовите шрифтове не са чувствителни към малки и големи букви. Освен това те не се нуждаят от кавички, защото са CSS ключови думи.
Задачата е: За да започнете, приложете monospace шрифт към елемента h2, така че той вече да има два шрифта - Lobster и monospace.
В последното предизвикателство импортирахте шрифта Lobster с помощта на маркера за връзка. Сега коментирайте импортирането на шрифта Lobster (използвайки HTML коментарите, които научихте преди) от Google Fonts, така че да не е достъпен повече. Забележете как вашият h2 елемент се разпада до monospace шрифт.
Забележка: Ако имате инсталиран шрифт Lobster на вашия компютър, няма да видите разпадането, защото браузърът ви може да намери шрифта.
Ако сте работили правилно ще видите как шрифта се разгражда до monospace.
Натиснете Run tests бутона. Ако сте работили добре, преминавате на следващата стъпка:
Продължете към: Size Your Images
Вижте всички уроци от Responsive Web Design >>