Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

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

Поддержи проект!!! smile

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

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

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

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

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

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

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

    @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

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

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

    Подключить @font face несколько шрифтов
    Так и хочется сказать - wall - какая разница подключить 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

  3. Подключить @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;
    Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!Подключить @font-face внешний источник

    + 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


Последняя дата редактирования : 01.02.2021 12:58
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
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

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
13/04/2021 08:12
Во-первых пожалуйста!1). $new_array - был прописан оттого, что контент на сайте пишется на живых примерах. И часто…
подробнее.
Валерий :
13/04/2021 05:47
перебрал весь материал- во первых спасибоискал другое но понравился Ваш материалerror - или неточность 1. везде…
подробнее.
Марат :
08/04/2021 07:12
Сам афигеваю!
подробнее.
stream :
07/04/2021 05:56
Неплохо)
подробнее.
Марат :
24/03/2021 11:01
Да что вы!? За что обижаться то?Вы тот редкий человек, который смог написать! Вы молодец!Человек, же который не…
подробнее.