Нагоре

2 начина за добавяне на шрифтове в WordPress

Винаги сте искали да можете да добавяте красиви шрифтове във Вашия WordPress сайт, нали? Нека Ви помогнем, без да се налага да заплащате за това! Единственото, което трябва е да четете внимателно и да го приложите на практика!

В интерес на истината, само с едно добавяне на шрифтове в сайта Ви, има голяма верятност да подобрите класирането си и в търсачките. С подобряването на четимостта, дори и скоростта на сайта, може да задържате по – дълго Вашите потребители на страниците си.

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

Добавяне на шрифтове чрез Plugin

Първият метод е с помощта на Plugin, който ние не предпочитаме! Разширението за добавяне на шрифтове, с което искаме да Ви запознаем е Google Fonts Typography.

Разбира се, ние препоръчваме да избягвате да пълните сайтовете си с разширения, ако искате да поддържат една благоприлична скорост.

Инсталиране на плъгина за добавяне на шрифтове

Влезте в администрацията на Вашия сайт и от там преминете към менюто „Разширения“. Натиснете на бутона „Добавяне на още“ и в търсачката въведете наименованието на разширението Google Fonts Typography или свалете разширението.

Инсталирайте Google Fonts Typography и да започваме с настройката. След като разширението за добавяне на шрифтове е активирано от секцията Разширения, можете да започнете с линка Settings.

Настройки за добавяне на шрифтовеЩе бъдете пренасочени, към меню настройки, чрез което можете да избирате дали да промените само отделни параметри или шрифта на всички части на сайта Ви. Един съвет от нас, ако държите на скоростта на зареждане на Вашия сайт.

Използването на няколко различни шрифта в сайта Ви, ще доведе до забавянето на зареждане, което от своя страна ще доведе до по ниска оценка в точковата система на Google Pagespeed Insights.

Добавяне на шрифтове с функцията Embed

Твърде е вероятно да сте запознати с тази функция, с която в следващите редове ще покажем, как да използваме, за да можем да добавим желания шрифт в нашия WordPress сайт. Нека си изберем шрифт, който искаме да ползваме за сайта. Залагаме на Open Sans Condensed

Разбира се, шрифта трябва да бъде взет от някъде, нали?! Влизаме в платформата за шрифтове на любимия чичо Google. https://fonts.google.com/

Шрифт Open Sans Condensed

След като вече сме намерили шрифта, който искаме да добавим, (в нашия случай Open Sans Condensed), трябва да изберем кои стилове ще добавим към сайта си. На изображението по – горе сме маркирали за стила „Light 300“. След като натиснем на линка със стила, ще се отвори от дясната страна Side panel, от който можем да копираме кода за вграждане във файла header.php

Добавяне на стил на фонаСлед като натиснем „+ Select this style“ ще се покаже странични панел, който ще визуализира нашия избор за стил и шрифт. Също така, чрез този панел можем да изберем да добавим и още стилове на самия шрифт.

Tips: Колкото повече стилове вмъквате, толкова по – бавен ще става сайта. Няма нужда да добавяте всички възможни стилове, ако не е наложително използването им. 

Тук можете да добавите и стила „Bold 700“, който да използвате за навигационите менюта и заглавията на страници и публикации.

Има шрифтове, които съдържат 5 или повече стила. В нашия случай „Open Sans Condensed“ разполага само с 3, които са напълно достатъчни за добавяне към сайта.

 

 

Използване на <link> за Добавяне на шрифтове

За предпочитане е винаги да използвате този метод за embed на шрифтове към сайтовете! Избягвайте да използвате метода @import!

 

Използване на link метод за шрифтовеСлучвало ли Ви се е да си тествате сайта за скорост с инструмента на Google – Pagespeed Insights? Със сигурност поне веднъж сте го правили.

След като сте кликнали на <link>, трябва да копирате целия път:

<link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap" rel="stylesheet">

След като го копирате, трябва да го поставите разбира се. Това трябва да се случи във файла header.php на Вашата тема. Препоръчваме Ви да го направите чрез използване на FTP клиент. Освен всичко това, Ви препоръчваме и още нещо.

Копирайте и преместете файла header.php в Child директорията на Вашата тема. По този начин, няма да се налага да повтаряте процедура с добавяне на шрифтове след всеки по – голям ъпдейт на темата.

Линкът трябва да бъде вмъкнат веднага след отварянето на секцията <head>. Ето един пример:

<head>

<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
// Тук въведете линка за интегриране на шрифта

<link rel="profile" href="https://gmpg.org/xfn/11">

<?php wp_head(); ?>

</head>

Добавяне във файла style.css

След като сте извършили процедурата по – горе, остава още малко. Трябва да добавите още малко код към сайта и всичко ще си дойде на мястото. Поставете следния код във файла style.css в паката child на Вашата тема.

font-family: 'Open Sans Condensed', sans-serif;

Сега вече сте интегрирали успешно шрифта на Google към Вашия сайт.

Търсите ли качествена поддръжка на сайта?

Нуждаете се от
поддръжка

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

Защо да се абонирате?

Колко често изпращате Email-и?

Не по – често от 2 пъти седмично. Опитваме се да не досаждаме и в същото време да предлагаме само качествени материали.

Какъв тип Email ще получаваме?

Нищо рекламно. Всичко, което ще получавате, ще бъде съобразено с добрите нрави. Ще Ви изпращаме публикации, като тази, която прочетохте в момента.

Можете ли да ми съдействате?

Разбира се. Ние сме насреща за всякакъв вид съпорт. Винаги ще помогнем и го правим с огромно удоволствие!

Абонирай се

Абонирай се за всичко ново и го получавай директно на пощата си. Ще ти изпращаме само интересни статии съдържащи помощни материали и насоки за по – добра поддръжка на сайта. Не изпускай!

Author avatar
Иван Занков
https://exito.bg
Основател на Студио за Уеб дизай и Дигитален маркетинг EXITO. Той стартира онлайн бизнеса през 2015 г. Има опит в Уеб дизайна, предимно с PHP технологии, както и солиден опит в рекламата на бизнеси в Интернет.

Напиши коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *