Наверняка множество авторов, имея при этом сайт на WordPress, где у них на всех контентных страницах используется в шаблоне шрифт без засечек, не в курсе о том, насколько легко можно изменить шрифт с засечками в редакторе WordPress Gutenberg.
К этому числу авторов относился и я, пока не дошли руки, и я через 3 года создания сайта, не задумался над тем, что будет намного удобнее использовать в редакторе мною полюбившийся шрифт “Segoe UI” или похожий на него “Ubuntu”, при этом уже, как пол года этот шрифт используется у меня в статьях.
Скорее всего повлияло и то, что сам редактор Gutenberg (и предыдущий редактор) обновляется в правильную сторону и технологии как обычно упрощаются и меняются. Но вот шрифт в этих редакторах всегда имел засечки, и никогда не менялся, имя ему “Noto Serif”.
От себя добавлю, что я очень долго искал симпатичный и более базовый шрифт без засечек, так как понимал, что большинство серьёзных сайтов используют именно sans-serif шрифты. И пройдя через множество шрифтов я понимал, что их стоит поменять. “Candara” был не серьёзным, “Roboto” и “Open Sans” мне просто не нравились и не устраивали. PT Serif, был хороший, но засечки надоели через месяцы спустя. Как итог на помощь пришёл именно “Segoe UI”.
Как поменять стандартный шрифт в редакторе Gutenberg
А теперь перейдём к теме, и перепишем стандартный шрифт (с засечками) на свой (без засечек). Подключим файл стилей, и переопределим настройки шрифта в CSS.
Откроем файл functions.php своей темы в WordPress, и напишем небольшой код:
/* Подключение стилей Gutenberg */
function my_gutenberg_style() {
wp_enqueue_style('gutenberg-style', get_stylesheet_directory_uri().'/editor.css');
}
add_action('enqueue_block_editor_assets', 'my_gutenberg_style');Специальный хук enqueue_block_editor_assets позволит добавить свои стили и скрипты в Gutenberg. Здесь мы этот hook используем, чтобы подгрузить файл editor.css в редактор.
Ну а editor.css мы размещаем в корне нашей темы, и добавляем туда те стили, которые нам нужно:
/* @import url('https://fonts.googleapis.com/css2?family=PT+Serif&display=swap'); */
.editor-post-title__block .editor-post-title__input,
.edit-post-visual-editor, .edit-post-visual-editor p,
.editor-styles-wrapper h1, .editor-styles-wrapper h2, .editor-styles-wrapper h3,
.editor-styles-wrapper h4, .editor-styles-wrapper h5, .editor-styles-wrapper h6,
.block-editor-default-block-appender textarea.block-editor-default-block-appender__content,
.editor-styles-wrapper {
font-family: 'Segoe UI', Ubuntu, sans-serif!important;
}
.editor-post-title__block .editor-post-title__input {
font-weight: 400;
}Вторая строка в коде, относится к классу Названия. Строка третья, это параграф. Четвёртая и пятая строки, меняют заголовок H1-H6. Ниже Вы можете добавить для каждого класса свои параметры и стили. Ничего сложного, в целом. Если что-то будет не понятно, пишите в комментарии.
Стоит добавить, что в данном случае шрифт “Segoe UI” уже имеется в каталоге базовых шрифтов Windows (Vista, 7, 8, 10). Поэтому я его могу не подключать отдельной строчкой. Если же Вам необходимо подключить к примеру популярный и уникальный шрифт “PT Serif” или любой другой, то стоит прописать строку через @import. Пример такой строки закомментирован в самом начале. Эту строку Вы можете найти в сервисе Google Fonts, при выборе уникального шрифта для Вашего сайта. Подключение можно делать одной строкой с Google серверов, так как мы работаем в админке, и нам не важна особая скорость в данном случае.
