Шрифт гугла в теме PaperMod

Ответить

Код подтверждения
Введите код в точности так, как вы его видите. Регистр символов не имеет значения.

BBCode ОТКЛЮЧЕН
Смайлики ОТКЛЮЧЕНЫ

Обзор темы
   

Развернуть Обзор темы: Шрифт гугла в теме PaperMod

Шрифт гугла в теме PaperMod

Admin » 11 фев 2023, 15:39

Обсуждение статьи Google fonts в PaperMod

Google fonts в PaperMod

Как выбрать шрифт в гугле

Не всегда создателя сайта устраивает шрифты, которые идут по умолчанию с шаблоном темы. Поэтому есть возможность поменять шрифт на свой или самый простой вариант выбрать в гугле.

Выбрать понравившийся шрифт https://fonts.google.com/ Если знать название шрифта, задать в поиске. Если не знать то есть сервисы для определения шрифта, который увидел где то. Например для этого сайта шрифт называется 'Oswald'.

Замена шрифта в теме PaperMod

Поиск в гуглфонт выдаст этот шрифт, нажать плюсик в строке 'Обычный 400'. Справа в окошке предпросмотр будут все необходимые данные для вставки шрифта в код. Выбрать *<link>*. Скопировать код:

Код: Выделить всё

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet"> 
И вставить его в пользовательский файл в конце после комментариев \themes\PaperMod\layouts\partials\extend_head.html Это специальный файл для пользователей, чтобы в случае обновления темы настройки не пропали.

Так же в пользовательский файл CSS вставим название шрифта, что бы не уклонятся от стандартной записи CSS в теме, сделаем минимальные изменения. Открыть файл \themes\PaperMod\assets\css\extended\blank.css и вставить следующий код:

Код: Выделить всё

body
{
font-family: 'Oswald', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 18px;
line-height: 1.6;
word-break: break-word;
background: var(--theme);
}
Это то же самое, если вставить 'Oswald' в блок body файла темы \themes\PaperMod\assets\css\core\reset.css С одним отличием, что ничего не слетит после обновления темы.

Можно сделать так, шрифт на сайте поменяется, но к каким последствиям еще приведет пока не знаю:

Код: Выделить всё

body
{
font-family: 'Oswald', sans-serif;
}
А еще лучше создать файл \themes\PaperMod\assets\css\extended\oswald-font.css и вставить туда этот код.

В общем можно поиграться с настройками и посмотреть к каким результатам это приведет.

Google fonts in PaperMod

How to choose a font in Google

The site creator is not always satisfied with the fonts that go with the theme template by default. Therefore, you can change the font to your own or choose the simplest option in Google.

Choose a font you like https://fonts.google.com/ If you know the font name, enter it in the search. If you don't know, then there are services for determining the font that you saw somewhere. For example, for this site, the font is called ‘Oswald’ .

Replacing the font in the PaperMod theme

A Google Font search will return this font, click the plus sign in the ‘Normal 400 ' line. On the right side of the preview window, you will see all the necessary data to insert the font into the code. Choose *<link>*. Copy the code:

Код: Выделить всё

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet"> 
And paste it in a custom file at the end after the comments \themes\PaperMod\layouts\partials\extend_head.html This is a special file for users, so that if the theme is updated, the settings are not lost.

Also, we will insert the font name into the custom CSS file, so that they do not shy away from the standard CSS entry in the theme, and make minimal changes. Open a file \themes\PaperMod\assets\css\extended\blank.css and insert the following code:

Код: Выделить всё

body
{
font-family: 'Oswald', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 18px;
line-height: 1.6;
word-break: break-word;
background: var(--theme);
}
Better yet, create a file \themes\PaperMod\assets\css\extended\oswald-font.css and paste this code there.

This is the same if you insert 'Oswald' to the block body the theme file \themes\PaperMod\assets\css\core\reset.css With one difference, that nothing will fly off after updating the theme.

You can make it so that the font on the site changes, but I don't know what consequences it will lead to yet:

Код: Выделить всё

body
{
font-family: 'Oswald', sans-serif;
}
In general, you can play around with the settings and see what results this will lead to.

Вернуться к началу