Как подключить шрифт к сайту примеры

Подробно о @font-face

1. Подключение шрифта @font-face.
2. Подключить @font-face несколько шрифтов
3. Подключить @font-face внешний источник

Скопировать ссылку



Подключение шрифта @font-face.

Чтобы подключить шрифт с помощью @font-face - разберем это на примере, и выведем результат прямо здесь! Данный вариант "подключения @font-face" - файл шрифта будет располагаться на сайте.


Скачиваем(например) какой-то из шрифтов.

Размещаем шрифт в папке и прописываем путь к файлу, нажмите оп ссылке - посмотрите, как проверить правильность написания пути до шрифта. Если начинается загрузка шрифта, то всё сделано правильно!(Основная причина не работающего правила @font-face) Если ничего не происходит, то путь написан не верно:

//dwweb.ru/__a-data/__all_for_scripts/__fonts/marvel.ttf

Далее собираем конструкцию, которая и подключит наш шрифт к сайту

@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 и размещаем весь собранный код прямо на странице.

<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

<div class="marvel">@font-face</div>

Результат подключения шрифта на сайте с помощью @font-face

@font-face

Чтобы вы смогли сравнить, вот текст без подключенного "@font-face"

no @font-face
Скопировать ссылку



Подключить @font face несколько шрифтов

Тут такой вопрос из интернета :

Подключить @font face несколько шрифтов
Так и хочется сказать - смайлы - какая разница подключить 1, 2, 1000 шрифтов с помощью @font face какое отношение имеет "количество" к "@font face" - очень странный вопрос...


Пример @font face подключения шрифта к сайту

Для закрепления материала рассмотрим ещё несколько примеров подключения шрифта локально на сайте.

Возьмем вот этот шрифт


<style>

@font-face { font-family: New example ; src: url(//dwweb.ru/___dwweb_ru/__template/fonts/mullerultralight.otf); }


.example_2{

font-family: New example;


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

<div class="example_2">@font-face</div>

Результат подключения шрифта на сайте с помощью @font-face

@font-face

Ещё пример @font face подключения шрифта к сайту

Давайте возьмем какой-то рукописный шрифт


Повторяем все тоже самое, что и в выше приведенных примерах:

style:

<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>

div:
<div class="BadScriptclass">@font-face</div>

Результат подключения шрифта на сайте с помощью @font-face

@font-face
Скопировать ссылку



Подключить @font-face внешний источник

Существуют сервисы, которые позволяют использовать внешнее подключение


После того, как вы выбрали шрифт - ищем строку "Select this style" - "выбрать этот стиль" - справа должно открыться окно с выбранным стилем - где "link" - копируем только ту часть, которая касается выбранного стиля: "Hachi Maru Pop"

<link href="https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&display=swap" rel="stylesheet">

Также справа копируем font-family

font-family: "Hachi Maru Pop", cursive;

Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!



+ div с классом "new" и текстом внутри:

<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>
Соберем весь код вместе:

<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 внешний источник

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
1 2 3 4 5 6 7 8 9 0

Еще никто не прокомментировал! COMMENTS+   BBcode

🞨

Загрузить свой аватар

(max ширина, высота = 200px)

Подписаться + =

---