Застосування одного шрифту до цілого веб-сайту за допомогою CSS

Я хочу використовувати єдиний шрифт під назвою "Алжир" на всьому своєму веб-сайті. Отже, мені потрібно змінити всі теги HTML, і я не хочу писати різний код для різних тегів, таких як:

button{font-family:Algerian;}
div{font-family:Algerian;}

Метод, написаний нижче, також вкрай не рекомендується:

div,button,span,strong{font-family:Algerian;}

Помістіть font-familyдекларацію в bodyселектор:

body {
  font-family: Algerian;
}

Тоді всі елементи на вашій сторінці успадкують це сімейство шрифтів (якщо, звичайно, ви не заміните його пізніше).

*{font-family:Algerian;}

краще рішення нижче Застосування одного шрифту до цілого веб-сайту за допомогою CSS

Універсальний селектор *посилається на всі елементи, цей css зробить це за вас:

*{
  font-family:Algerian;
}

Але, на жаль, якщо ви використовуєте значки FontAwesome або будь-які значки, які потребують власного сімейства шрифтів, це просто знищить піктограми, і вони не відображатимуть необхідний вигляд.

Щоб уникнути цього, ви можете скористатися :notселектором, зразком піктограми fontawesome <i class="fa fa-bluetooth"></i>, тому просто ви можете використовувати:

*:not(i){
  font-family:Algerian;
}

це застосує це сімейство до всіх елементів у документі, крім елементів з іменем тегу <i>, ви також можете зробити це для класів:

*:not(.fa){
  font-family:Algerian;
}

це застосує це сімейство до всіх елементів у документі, за винятком елементів із класом "fa", який відноситься до класу fontawesome за замовчуванням, ви також можете націлити декілька класів, як це:

*:not(i):not(.fa):not(.YourClassName){
  font-family:Algerian;
}

Переконайтеся, що мобільні пристрої не змінюють шрифт за замовчуванням, використовуючи важливі разом із універсальним селектором *:

* { font-family: Algerian !important;}

* { font-family: Algerian; }

Універсальний селектор *відноситься до будь-якого елемента.

Оскільки браузер, ймовірно, вже визначив інший шрифт для елементів форми, ось два способи використання цього шрифту скрізь:

body, input, textarea {
    font-family: Algerian;
}

body {
    font-family: Algerian !important;
}

У таких елементах, як pre / code, kbd тощо, все одно буде монопросторовий шрифт, але, якщо ви використовуєте ці елементи, вам краще використовувати там монопросторовий шрифт.

Важливе зауваження: якщо дуже мало людей мають цей шрифт, встановлений у своїй ОС, тоді буде використаний другий шрифт у списку. Тут ви не визначили жодного другого шрифту, тому використовуватиметься шрифт за замовчуванням за замовчуванням, і це буде Times, Times New Roman, за винятком, можливо, Linux.
Є два варіанти: використовуйте @ font-face, якщо ваш шрифт не можна використовувати як завантажуваний шрифт, або додайте резервні файли: другий, третій тощо і нарешті сімейство за замовчуванням (sans-serif, скоропис (*), монопростір або зарубок). Буде використано перший із списку, який існує в ОС користувача.

(*) курсивом за замовчуванням у Windows є Comic Sans. За винятком випадків, коли ви хочете тролити користувачів Windows, не робіть цього :) Цей шрифт жахливий, крім днів народження ваших дітей, де він вітається.

Будь ласка, розмістіть це в голові ваших Сторінок (сторінок), якщо для "тіла" потрібно використовувати один і той же шрифт:

<style type="text/css">
body {font-family:FONT-NAME ;
     }
</style>

Все між тегами <body>і </body>матиме однаковий шрифт

Гаразд, у мене виникла ця проблема, коли я спробував кілька різних варіантів.

Я використовую шрифт Ubuntu-LI, я створив папку шрифтів у своєму робочому каталозі. під шрифтами папки

Я зміг застосувати це ... зрештою ось мій робочий код

Я хотів, щоб це стосувалося всього мого веб-сайту, тому розмістив його у верхній частині css-документа. перш за все теги Div (не те, що це важливо, просто знайте, що будь-які окремі шрифти, які ви призначите після публікації вашого сценарію, матимуть перевагу)

@font-face{
    font-family: "Ubuntu-LI";
    src: url("/fonts/Ubuntu/(Ubuntu-LI.ttf"),
    url("../fonts/Ubuntu/Ubuntu-LI.ttf");
}

*{
    font-family:"Ubuntu-LI";
}

Якби я тоді хотів, щоб усі мої теги H1 були чимось іншим, скажімо без саріфа, я б зробив щось подібне

h1{
   font-family: Sans-sarif;
}

У такому випадку лише мої теги H1 були б шрифтом sans-sarif, а решта моєї сторінки - шрифтом Ubuntu-LI

у Bootstrap веб-інспектор каже, що заголовки налаштовані на "успадковувати"

все, що мені потрібно, щоб встановити мою сторінку на новий шрифт, було

div, p {font-family: Algerian}

це в .scss

*{font-family:Algerian;}

цей html у мене працював. Додано до налаштувань полотна в wordpress.

Виглядає круто - дякую!