Как подключить шрифт к сайту примеры
Подробно о @font-face
- Подключение шрифта @font-face.
- Подключить @font-face несколько шрифтов
- Подключить @font-face внешний источник
Подключение шрифта @font-face.
Чтобы подключить шрифт с помощью @font-face - разберем это на примере, и выведем результат прямо здесь! Данный вариант "подключения @font-face" - файл шрифта будет располагаться на сайте.Скачиваем(например) какой-то из шрифтов.
Размещаем шрифт в папке и прописываем путь к файлу, нажмите оп ссылке - посмотрите, как проверить правильность написания пути до шрифта. Если начинается загрузка шрифта, то всё сделано правильно!(Основная причина не работающего правила @font-face) Если ничего не происходит, то путь написан не верно:
Далее собираем конструкцию, которая и подключит наш шрифт к сайту
После подключения. нам нужно написать какой-то стиль, чтобы его применить:
font-family: "Marvel";
width: 100%;
height: 186px;
text-align: center;
text-transform: uppercase;
font-size: 128px;
color: white;
background: red;
line-height: 212px;
margin: 20px 0;
}
Все помещаем в style и размещаем весь собранный код прямо на странице.
<style>
@font-face { font-family: Marvel; src: url(//dwweb.ru/__a-data/__all_for_scripts/__fonts/marvel.ttf); }
.marvel {
font-family: "Marvel";
width: 100%;
height: 186px;
text-align: center;
text-transform: uppercase;
font-size: 128px;
color: white;
background: red;
line-height: 212px; margin: 20px 0;
}
</style>
Ещё нам нужен любой элемент Dom - пусть это будет div
Результат подключения шрифта на сайте с помощью @font-face
Чтобы вы смогли сравнить, вот текст без подключенного "@font-face"
Подключить @font face несколько шрифтов
Тут такой вопрос из интернета :

Пример @font face подключения шрифта к сайту
Для закрепления материала рассмотрим ещё несколько примеров подключения шрифта локально на сайте.
Возьмем вот этот шрифт<style>
@font-face { font-family:.example_2{
font-family:width: 100%;
height: 182px;
text-align: center;
text-transform: uppercase;
font-size: 66px;
color: white;
background: red;
line-height: 203px; margin: 10px 0;
}
</style>
Опять используем div
Результат подключения шрифта на сайте с помощью @font-face
Ещё пример @font face подключения шрифта к сайту
Давайте возьмем какой-то рукописный шрифтПовторяем все тоже самое, что и в выше приведенных примерах:
<style>
@font-face{font-family: Bad Script; src: url(//dwweb.ru/__a-data/__all_for_scripts/__fonts/BadScript-Regular.ttf); }
.BadScriptclass {
font-family: Bad Script;
width: 100%;
height: 182px;
text-align: center;
font-size: 30px;
color: white;
background: red;
line-height: 193px;
margin: 10px 0;
}
</style>
Результат подключения шрифта на сайте с помощью @font-face
Подключить @font-face внешний источник
Существуют сервисы, которые позволяют использовать внешнее подключениеПосле того, как вы выбрали шрифт - ищем строку "Select this style" - "выбрать этот стиль" - справа должно открыться окно с выбранным стилем - где "link" - копируем только ту часть, которая касается выбранного стиля: "Hachi Maru Pop"
Также справа копируем font-family

+ div с классом "new" и текстом внутри:
<link href="https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&display=swap" rel="stylesheet">
<style>
.new {
font-family: "Hachi Maru Pop", cursive;
width: 90%;
height: 240px;
text-align: center;
font-size: 23px;
color: white;
background: red;
line-height: 61px;
margin: 10px 0;
padding: 5%;
}
</style>
<div class="new">A a, B b, C c, D d, E e, F f, G g, H h, I i, J j, K k, L l, M m, N n, O o, P p, Q q, R r, S s, T t, U u, V v, W w, X x, Y y, Z z<br>1 2 3 4 5 6 7 8 9 0</div>
Результат подключения шрифта на сайте с помощью @font-face внешний источник
1 2 3 4 5 6 7 8 9 0
font-face как подключить шрифт к сайтукак подключить шрифт к сайту cssкак подключить шрифт к сайту htmlподключить ttf шрифт к сайтуподключить шрифт к сайту css ttffont facefont face cssface font шрифтfont face font familyfont face urlfont face htmlfont face arialtimes font faceподключение font faceподключение шрифтов font faceподключение шрифтов css font facestyle normal font face fontfont face ttffont face как подключитьнесколько font facefont face wofffont face woffподключить шрифт font facefont face несколько шрифтовcss font face несколько шрифтовfont face unicode range