Как изменить шрифт на вордпресс

Как поменять шрифт на сайте WordPress

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

Для начала стоит определиться с целью — вы хотите полностью изменить шрифт на новый, или отредактировать старый. Начнем с 1-го варианта

Как изменить шрифт на WordPress в шаблоне

В большинстве современных шаблонов (тем оформления) изменения шрифтов делается довольно просто — из настроек самого шаблона в админке Вордпресса.

В каждой теме эти настройки могут быть расположены по своему, но основных путей несколько:

1. Админка — Внешний вид — Настроить. Тут откроется менюшка, в которой можно произвести кастомизацию шаблона, исходя из его возможностей.

Она может называться по разному — Fonts, Typography или как-то на русском. Внутри вы найдете доступные для данного шаблона настройки шрифтов.

Как правило это выбор из списка семейства шрифтов, установка размера и цвета шрифтов для разных элементов шаблона, типа заголовков, параграфов.

2. Однако не всегда полноценные настройки шаблона находятся по этому пути, иногда в шаблонах бывает отдельно созданная среда для его управления.

Как правило находятся настройки почти там же, Админка — Внешний вид- Theme options (или название шаблона). Либо может быть нужная опция просто в админке добавится с названием шаблона.

Внутри также ищите необходимые настройки шрифтов.

Это были относительно простые способы. Далее мы рассмотрим варианты, когда в самой теме оформления ВП нет необходимых настроек для шрифтов.

Как поменять цвет шрифта в Вордпресс через CSS

Если ваш шаблон не хочет помогать вам в кастомизации, то придется прибегнуть к ручной правке стилей через CSS правила. Если разобрать, то это не сложнее, чем разобраться как убрать защиту от записи с флешки. Однако придется потратить какое-то время на изучение, либо обращаться к специалистам, если времени или желания нет самостоятельно разбираться.

Для того что бы поменять цвет шрифта существует CSS правило color. Выглядит это примерно так в коде:

• В данном примере p это селектор параграфов, т.е. мы меняем цвет для всего текста заключенного в тэг параграфа p.
• color соответственно это атрибут, который мы хотим поменять у параграфа, который означает цвет
• #af7070 это всего лишь шестнадцатеричный код цвета в RGB, соответствующий коричневому оттенку.

Хорошая новость — вам вовсе не обязательно учить все правила и коды цветов, достаточно иметь современный браузер и воспользоваться инструментом просмотра кода (CTRL+Shift+I для хрома)

Выбираем стрелочкой нужный нам элемент на странице, который хотим изменить, и слева можем увидеть текущие стили данного элемента.

В моем примере у тэга p уже задан цвет и достаточно просто нажать по квадратику с цветом, что бы выбрать нужный нам. Но не торопитесь, изменения в этом инструменте сами по себе не сохранятся на сайте. Их нужно скопировать и сохранить в шаблоне.

Например вы поменяли цвет шрифта параграфов на черный, выглядеть это будет теперь так

Копируем данный код и сохраняем по следующему адресу: Админка — Внешний вид — Настроить — Дополнительные стили

Там откроется окошко, в котором вы можете сохранять все ваши собственные стили, без риска потери изменений при обновлении шаблона.

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

Как изменить размер шрифта

По аналогии с изменением цвета, все тоже самое, только вместо атрибута color для указания размера текста используется атрибут
font-size. Несколько правил записываются вместе, с новой строки через; Выглядит это будет так вместе с цветом и размером:

Где 17px это указание размера шрифта в пикселях. Можете подобрать оптимальные для себя значения изменяя эту цифру.

Как изменить семейство шрифта на ВП

Но что делать если изначально шрифт на сайте вам не нравится и вы хотите другой? Тут все сложнее.

Браузеры по умолчанию поддерживают не так много шрифтов, их вы можете увидеть в таблице ниже:

За семейство шрифтов отвечает CSS правило font-family и выглядит полностью оно так в нашем примере:

Где font-family это атрибут семейства, а перечисления Arial, Helvetica, Sans-Serif через запятую это указания шрифтов и типа шрифтов.

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

Если же вы хотите установить нестандартный шрифт на сайт, то придется поколдовать немножко) Проще всего будет использовать плагины, типа WP Google Fonts.

Либо можно зайти на сайт того же гугла https://fonts.google.com/ и подобрать там что-то интересное, а затем следуя несложной инструкции подключить данный шрифт на свой сайт.

Однако имейте ввиду, что далеко не все шрифты там поддерживают кириллицу, используйте в настройках именно кириллические шрифты при поиске подходящего, если ваш сайт на русском языке.

А какой у вас любимый шрифт для сайта? Мои например это PT Sans, Tahoma и Verdana

Как менять размер шрифтов в WordPress? Основные способы

Часто, чтобы текст на сайте читался лучше, нужно изменить размер шрифта в WordPress. Сделать это можно с помощью плагина или добавив несколько строк кода в файл CSS. Есть и третий способ — изменить размер шрифта с помощью редактора Gutenberg.

Следуйте инструкции, чтобы сделать все просто и быстро.

Способ 1. Меняем размер шрифта с помощью плагина Advanced Editor Tools

Advanced Editor Tools — полностью бесплатный компонент, который позволяет вернуть в редакторе классическую панель инструментов.

Найти плагин можно в официальном репозитории WordPress. После стандартной установки и активации перейдите в настройки плагина.

Плагин предложит вам переключиться между редактором блоков Gutenberg и классическим редактором TinyMCE. Выберите второй вариант и сохраните изменения.

Убедитесь, что вы поставили отметку в чек-боксе

Дальнейшие действия. Если вы выбрали классический редактор как единственный вариант.

Перейдите в раздел Записи — Добавить новую или перейдите к редактированию одной из существующих записей. Если вы выбрали только классический вариант, то увидите примерно следующее.

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

Результат будет выглядеть вот так.

Способ 2. Изменение размеров с помощью CSS

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

Этот вариант сложнее, но только если вы никогда не работали с CSS. Инструкция от Host4Biz поможет сделать всё быстро и правильно.

Добавить код в CSS можно через редактор или настройщик (customizer). Как это делается. Преимущество работы с css в том, что можно менять размер шрифта в любом элементе сайта без плагинов и независимо от других частей страницы.

Разберем, как это делается:

В консоли выбираем пункт меню Внешний вид — Настроить.

Затем в открывшемся меню выбираем Дополнительные стили.

Следующим шагом добавляем нужный код в поле справа.

Теперь разберемся, какой именно код добавлять.

1. Чтобы поменять весь шрифт, вставляйте:

Значение 1,25 можно заменить другой цифрой.

2. Чтобы изменить шрифт в абзацах.

3. Для изменения шрифта в части заголовков

Команда будет применяться только к заголовкам, отмеченным h2.

4. Изменить размер шрифта в боковом меню

5. Чтобы увеличить или уменьшить размер текста в футере

6. Изменение размеров шрифта для определенных размеров экрана

В CSS-стилях можно использовать несколько единиц измерения:

1. Эм (em) — 1em соответствует размеру шрифта на странице, то есть если размер шрифта 12pt, 1em=12pt.
2. Пиксели — пиксель это одна точка на экране компьютера или мобильного устройства.
3. Пункты — эту единицу заимствовали из бумажных изданий. Один пункт соответствует 1/72 дюйма.
4. Проценты — эта величина по умолчанию равна 100%, при увеличении или уменьшении будет меняться.

Способ 3. Изменение размеров шрифта с помощью редактора Gutenberg

Gutenberg — стал стандартным редактором WordPress. Он предлагает возможности для изменения шрифта еще начиная с версии 5.3, где Gutenberg был одним из плагинов.

В Gutenberg текст добавляется с помощью одного из блоков редактора. Чтобы изменить размер шрифта, просто выделите текст и выберите нужный размер в правом меню.

Как видите, все очень просто и быстро.

Итоги

Легко читаемый шрифт может серьезно повлиять на поведенческие факторы и показатель конверсии сайта. WordPress дает много возможностей для переформатирования текста, в том числе, и изменения шрифта.

Увеличить или уменьшить шрифт можно с помощью плагинов, редактора Gutenberg или редактирования CSS-файлов.

How to Add a WordPress Custom Font on Your Site

There are countless ways how to make your WordPress site look more eye-pleasing . One of them is by adding custom fonts so your WordPress website.

However, the choice of WordPress fonts can be limited and theme dependent. In this article, you will learn how to add custom fonts to WordPress both manually and by using plugins.

Where to Download Fonts for WordPress?

There are numerous sites where you can find free web fonts, and Font Squirrel is one of them. You can easily find free fonts that are licensed for commercial work. Besides that, Google Fonts has over 900 font families, and Edge Web Fonts, provided by Adobe, offers a vast collection of web fonts.

If you’re looking for something more suited for personal use, check out Fonts.com, DaFont, and 1001 Free Fonts.

Converting Fonts to a Web-Friendly Format

It is worth mentioning that not all web browsers support every custom font. Nevertheless, even if your chosen font is unsupported, you can still convert it to a compatible format.

Before converting fonts from one format to another, let’s have a quick look at different font formats:

• Open Type Fonts (OTF) – the most commonly used web fonts and are a registered trademark of Microsoft. This format works well with almost all major browsers.
• True Type Fonts (TTF) – developed by Microsoft and Apple in 1980. Widely used for both Windows and macOS.
• Web Open Font Format (WOFF) – broadly used format for web pages and recommended by the World Wide Web Consortium (W3C).
• WOFF 2.0 – considered a better option than WOFF 1.0 due to better compression abilities. This format is not supported by Safari and Internet Explorer but works well with Google Chrome, Firefox, or Opera.
• Embedded OpenType Fonts (EOF) – more compact OTF fonts, used as embedded fonts on web pages. All major browsers support EOF.

If you’re not sure if your font is compatible with your default browser, use the Web Font Generator. This tool allows you to convert almost any font to a web-friendly format easily:

1. Go to Webfont Generator.
2. Click the Upload Fonts button and choose a font that you want to convert,
3. Tick the box in the Agreement section to state that your fonts are legally eligible for web embedding.
4. Press the Download Your Kit button and save the .zip archive to your computer.
5. Inside the archive, you will find fonts in WOFF and WOFF 2.0 format along with CSS files and demo HTML page.

How to Add Custom Fonts to WordPress?

Here’s how you can add custom fonts to WordPress, adding one manually or by using plugins.

How to Manually Add Fonts to WordPress

If you don’t want to overburden your WordPress with plugins, you can manually add fonts to your website. You must upload your font to your WordPress host account or whichever type of hosting you use and edit your theme’s CSS file.

1. Download the font you want to use to your computer and extract the .zip archive if necessary.
2. Upload your font file to wp-content/themes/your-theme/fonts directory. Create a separate fonts folder if you don’t have one yet. You can use an FTP client like FileZilla or Hostinger’s File Manager for this task. In our example, we have uploaded AguafinaScript-Regular.ttf font using the File Manager in hPanel.
3. Head to the WordPress admin area. Then, go to Appearance -> Theme Editor. You’ll be presented with the style.css file. Scroll down and add the following code. @font-face < font-family: Aguafina Script-Regular; src: url(http://test-site.com/wp-content/themes/twentynineteen/fonts/AguafinaScript-Regular.ttf); font-weight: normal; >

Pro Tip

Don’t forget to change font-family and URL values to match your font.

1. Press the Update File button to save your changes.

Remember, the font-face code loads the font every time a visitor visits your website. However, the font is still not applied to any element yet.

To assign the font for a specific element, you need to edit the same style.css file. For example, the following code would apply Aguafina Script font to our website’s title.

Here’s the final result:

How to Add Fonts in WordPress using Plugins

Installing plugins to add custom fonts to WordPress is probably the simplest way to accomplish the task. Here are a few of the most popular options:

WP Google Fonts

WP Google Fonts offers you the freedom to use custom fonts and apply them to particular CSS elements.

Install the WP Google Fonts plugin from the WordPress plugin directory and open the Google Font Control Panel through your WordPress dashboard. Here you can select fonts and change various settings such as font style, assigned elements, etc.

Easy Google Fonts

With Easy Google Fonts, you can use any theme and preview any font in real-time. It’s also simple to use since no coding skills are required.

Once you’ve installed and activated the plugin, you can edit and manage font settings by accessing Settings -> Google Fonts. If you want to tweak your theme’s typography immediately, enter your WordPress Customizer by clicking Appearance -> Customise. Next, you can start customizing in the Typography section, where you can manage fonts on any part of your site.

Use Any Font

Use Any Font is another excellent plugin that can help you add several fonts to your WordPress website. Once installed, create a free API key and press the Verify button.

After the verification, you can upload fonts in TTF, OTF, and WOFF formats. Use Another Font allows you to assign fonts to custom elements as well.

Conclusion

You learned how to download and convert fonts into a web-friendly format. You also discovered two ways how to add custom fonts to WordPress. Whichever fonts you choose, make sure that it’s suited to your site’s theme and style.

If you have any questions regarding how to add fonts to WordPress, share your thoughts in the comment section below, or visit our WordPress guide if you have any general questions about the CMS.

More Advanced WordPress Tutorials

WordPress Custom Font FAQ

Now that you know about how to add a WordPress custom font, here are some frequently asked questions about the topic.

How Do I Add a Custom Font to WordPress Without Plugins?

To manually add custom fonts to WordPress, you will need to use an FTP client like FileZilla or a File Manager. You will need to upload the custom font to your hosting account and edit your theme’s CSS file.

Can I Use Any Font on WordPress?

Yes, you can use any font on WordPress. However, it is important to keep in mind that some fonts may be too large or too small for your website, so it is important to make sure that the font you choose is compatible with your theme.

Is It Illegal to Use the Same Font as Another Company?

The legality of using a particular font depends on the context and its usage. Fonts are considered intellectual property and may be protected by copyright laws in most countries. Ultimately, whether it’s illegal to use someone else’s font varies according to each country’s laws so you should consult a lawyer.

Domantas leads the content and SEO teams forward with fresh ideas and out of the box approaches. Armed with extensive SEO and marketing knowledge, he aims to spread the word of Hostinger to every corner of the world. During his free time, Domantas likes to hone his web development skills and travel to exotic places.

Как изменить размер шрифта на WP?

Рассмотрим изменение шрифта в поле контента, изменение комментариев и увеличение шрифта при вводе сообщения в поле для комментария. Изменить размер шрифта на сайте легко, нужно зайти в style.css в теме и поставить цифру.

Как найти файл? Иногда у начинающих возникает такой вопрос.

Диспетчер файлов → public_html → wp_content → themes → папка вашей темы → style.css

Он у всех стандартный, если у вас другой, ищите папку темы, там точно будут нужные файлы.

Изменение шрифта в поле

Поставим две задачи:

• Поменять существующий шрифт на другой.
• Изменить размер букв в поле для контента.

Заходим на сайт, нужно открыть одну статью, правой кнопкой мыши выбираем: «Исходный код страницы». Если у вас стоят плагины для блокирования выделений, то отключить.

Ищем статью, это часть кода с большим количеством текста, она немного ниже находится. Вот здесь останавливаемся:

Нас интересует div class, который стоит выше текста. Необходимо узнать, что искать в файле style.css. Вот он, смотрите:

У меня это «entry». В нём указан размер и вид шрифта. Давайте проверим. В вашей теме у этого класса будет иное название, главное его увидеть. Идем в файл style.css, ищем название. Нажимаем Ctrl+F и вписываем в окно поиска «entry». Поиск сразу выделит нужную строку.

В поле «font-size» ставьте, сколько вам нужно пикселей, у меня 15 стоит – размер, а в поле «font-family» вписываете название шрифта. У меня контент обозначен вторым шрифтом.
Межстрочный интервал меняем в строке «line-height», у меня стоит 20px.

Изменение шрифта комментариев

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

Я меняла у себя шрифт на крупный размер, выглядело ужасно, читать было удобно. Поигралась и оставила подходящий вариант. Находим нужный класс в открытом коде страницы, у меня это «class = commentlist».

В файле style.css при помощи ctrl+f находим строку «commentlist». Изначально у меня не было здесь заданного размера, я просто его добавила, написав: font-size: 15px.

Если вам нужен больше размер, ставьте тот, который понравится.

Изменение шрифта в поле комментария

Происходит в файле style.css. При помощи поиска вводим следующее: commentform textarea. Это у всех стандартно должно быть. Если не видите font, то самостоятельно пишем font: 18px Arial;

Arial – название шрифта.
Вот такой размер получается, очень удобно набирать и не нужно присматриваться к словам.

Если что-то будет не ясно, спрашивайте. Я не программист, но что-то разбираю сама и другим подсказываю.

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