@font-face е CSS правило, което позволява шрифтовете да се показват в уеб страници в интернет. Преди да се появи това правило, уебмастърите можеха да използват в сайтовете си ограничен набор от шрифтове, които са най-често срещаните и инсталирани на компютрите на потребителите. С появата на @font-face всеки конкретен шрифт може лесно да бъде прикрепен към уебсайт.
Ако сте изтеглили шрифта от нашия сайт, в архива с шрифтове ще намерите готов CSS-код, който трябва да копирате и да поставите в CSS-документа, приложен към проекта.
Инсталиране стъпка по стъпка
1. Изберете желания шрифт и щракнете върху "Изтегляне за уебсайта".
2. В главната папка на сайта си създайте папка шрифтове и копирайте изтеглените шрифтове.
Отворете вашия CSS документ и копирайте съдържанието на текстовия файл от архива в него.
4. Уверете се, че пътят до папката с шрифтове е изписан правилно. В зависимост от позицията на папката, в която се намират шрифтовете, пътят може да съдържа една или повече точки.
5. Готово. Копирайте свойството с фамилията и го поставете в селектора, за който пишете стиловете.
Какво да правя, ако вече съм изтеглил шрифта от друго място и искам да го включа?
В този случай трябва да намерите конвертор на шрифтове в интернет и да конвертирате вашия шрифт ttf (или otf) в подходящи формати, а именно eot, svg, woff и woff2. Това се прави, за да се гарантира, че шрифтът се показва и работи правилно във всички браузъри, както и на мобилни устройства.
След това трябва сами да изпишете правилото @font-face, като спазвате неговия синтаксис.
Синтаксисът за @font-face
Синтаксисът на правилото може да бъде разделен грубо на основни свойства и разширени свойства.
Основни:
- font-family - посочва името на шрифта.
- src - показва пътя на шрифта. Това може да бъде URL адресът на шрифта, намиращ се на сървъра на вашия уебсайт, URL адреси на шрифтове, намиращи се на чужд сървър (например Google Fonts), или просто името на шрифта, намиращ се на компютъра на потребителя (Helvetica New Bold, Tahoma, Georgia и др.) .
Разширен:
- font-display - определя как ще се появи шрифтът в зависимост от това дали е изтеглен и дали е готов за използване.
- font-stretch - ви позволява да регулирате ширината на текста.
- font-style - определя дали шрифтът е обикновен, курсивен или наклонен (последните два не са еднакви).
- font-weight - Задава наситеността на шрифта по скала от 100 до 900 (100-малък, 900-малък).
- font-variant - определете как да бъдат представени малките букви - оставете ги непроменени или ги направете изцяло малки (главни).
- font-feature-settings - ви позволява да управлявате усъвършенствани типографски функции в шрифтовете OpenType.
- font-variations-settings - позволява управление на ниско ниво на варианти на шрифтове Open Type и TrueType чрез задаване на четирибуквени имена на оси.
- unicode-range - определя обхвата на Unicode кодовете (глифовете), които трябва да се използват в шрифта.
Свързване на шрифт към вашия сайт с Google Fonts
Използването на Google Fonts е най-лесният начин да свържете шрифт с вашия уебсайт. Отидете на техния уебсайт, намерете желания шрифт, изберете правилния шрифт за инсталиране и копирайте кода.
Копираният код трябва да се постави в тялото на тага head на вашата html страница.
Недостатък на този метод е, че ако по време на направата на сайта сте загубили интернет - шрифтовете няма да бъдат показани и заменени със стандартни, защото файловете не се намират на локалния компютър, а на сървърите на Google. Освен това има вероятност, когато дойдете при клиента за представяне на макета (или просто за съгласуване) и той няма Wi-Fi, проблемът да се повтори.
