Применение одного шрифта ко всему сайту с помощью 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;
}

Убедитесь, что мобильные устройства не меняют шрифт на шрифт по умолчанию, используя important вместе с универсальным селектором *:

* { 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, если ваш шрифт не используется в качестве загружаемого шрифта, или добавьте запасной вариант (ы): второй, третий и т. Д. И, наконец, семейство по умолчанию (без засечек, курсив (*), моноширинный или с засечками). Будет использован первый из списка, который существует в ОС пользователя.

(*) курсивом по умолчанию в Windows является Comic Sans. Если только вы не хотите троллить пользователей Windows, не делайте этого :) Этот шрифт ужасен, за исключением дней рождения ваших детей, где это приветствуется.

Пожалуйста, поместите это в заголовок вашей страницы (ов), если в "теле" нужно использовать 1 и тот же шрифт:

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

Классно смотрится - спасибо!