Как да добавите персонализирани шрифтове към вашия WordPress сайт

Как да добавите персонализирани шрифтове към вашия WordPress сайт

Защо да направите блога си скучен, използвайки стандартни шрифтове? Нека блогът ви говори за вашата жизнена личност и темите, които покривате с голямо разнообразие от персонализирани шрифтове. Персонализираните шрифтове са приятна функция, която позволява на вашия блог да изглежда за предпочитане пред останалите.


Нека си го кажем; всички обичаме блогове и сайтове с правилните шрифтове. Те не само украсяват сайта, но и спомагат за привличането на потребителя към вашето съдържание. Изборът на стандартни WordPress шрифтове обаче е ограничен и зависи от темата, която използвате. Добрата новина е, че можете да ги добавите ръчно или със специализирани приставки.

И тук възникват два въпроса – къде да получите персонализирани шрифтове за WordPress и как да инсталирате персонализирани шрифтове на вашия сайт WordPress.

Нека разберем.

Contents

 Защо трябва да използвам персонализирани шрифтове?

Дните отминават, когато Times New Roman и Georgia се смятат за единствените шрифтове за текстове на уебсайтове. През последните няколко години пространството на шрифтите се промени изцяло с появата на шрифтове като Google Fonts и други.

Днес в интернет има стотици безплатни шрифтове, информационни и учебни помагала и ресурси, предназначени за проектиране. За разлика от Adobe Illustrator, Photoshop и други класически приложения, WordPress не ви дава пълен контрол над шрифтовете по подразбиране. Само някои теми избират да поддържат и използват персонализирани шрифтове.

Следователно в тази публикация ще научите как да намерите подходящи персонализирани шрифтове и как да ги използвате във вашия WordPress сайт.

Значението на използването на персонализирани шрифтове

Защо да променяте шрифтове, отстъпи между думите, интервал между редове, разстояние между букви или наситеност на шрифта, питате? Както и да е, някои изследвания доказват това типографията подобрява разбирането за четене.

Много зависи от изграждането на шрифтове. На съзнателно и подсъзнателно ниво – всеки оценява съдържанието на уеб страница по дизайн.

Дизайнът на шрифтите засяга читателите, дори и те да не му обръщат внимание. Да се ​​откаже от дизайна на шрифта означава да се изостави от самото развитие! От него зависи настроението на читателя. Шрифтът или улеснява четенето, или принуждава потребителите да напуснат страницата.

Всички уеб браузъри включват набор от шрифтове по подразбиране. Това означава, че ако шрифтът не е посочен в CSS на страницата, тогава ще се използва стандартната версия. Винаги можете да използвате шрифтовете по подразбиране, но те усложняват работата на потребителите. Ето защо е важно да използвате персонализиран шрифт. Ако темата ви не ви дава опции за промяна на шрифта, много уебсайтове и инструменти могат да ви помогнат.

Алтернативи на Google Шрифтове

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

Много от вас знаят за безплатни шрифтове в Google. Има още много сайтове, където можете да намерите красиви шрифтове. Някои от тях са безплатни за лична употреба. Ако имате нужда от търговска употреба, тогава се нуждаете от лиценз. Google Fonts и Adobe Edge Fonts са безплатни. Ето защо те не са толкова уникални. И това не ни подхожда.

Ето няколко други ресурси за намиране на шрифтове за безплатно и търговско използване:

  1. TemplateMonster – На уебсайта на пазара на TemplateMonster ще намерите всичко за уеб дизайна, от което се нуждаете. Има и много шрифтове и пакети с шрифтове за лична употреба за малка цена. Освен това те са представени в ONE комплект за уеб разработка. Колекцията е огромна и креативна. За да ви помогне да изберете всички шрифтове, представени на брошури или рамки. Всеки шрифт е представен и с търговски лиценз.
  2. MyFonts – MyFonts в момента предлага най-големия избор на шрифтове в света. Цените тук обаче са и в по-високия сегмент. Така че, ако имате малък бюджет, това може да не е за вас.
  3. FontSpring – Fontspring продава фантазирани шрифтове за търговска употреба. Но в почти всяко семейство 1-2 безплатни шрифта, които могат да се използват за лични цели. Освен това има отделен раздел с безплатни шрифтове. Колекцията е жива. Но ще трябва внимателно да проучите информацията за лиценза за определен шрифт, преди да изтеглите.
  4. Cufonfonts – Освен това е обширна колекция от различни шрифтове. Изберете някоя и ще видите страница с подробна информация за нея. Има много безплатни шрифтове и те са разделени на отделни секции. Системата за сортиране на CufonFonts е доста гъвкава и удобна. Също така е включена поддръжката на Webfont.
  5. Dafont – Друга достъпна колекция от 3 500 безплатни шрифтове. Повечето от тях са предназначени само за лична употреба. Хубава функция на DaFont е категорийна система. Можете да изберете шрифтове в стила на комикси, видео игри, реколта или стилизирани като японски символи.

Изборът на шрифтове е много примамлив, защото всички те са красиви. Но не бива да избирате много. употреба не повече от два шрифта на сайта. Тогава външният вид на вашия сайт ще бъде последователен. След като изберете вашите шрифтове, не забравяйте да изтеглите файловете за всеки стил, който ще използвате (нормален, удебелен, курсив и т.н.).

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

Как да добавите персонализирани шрифтове към WordPress

Има няколко начина за добавяне на шрифтове към WordPress сайт:

  1. Plugins: в този случай се използват различни приставки за WordPress, които улесняват процеса.
  2. Ръчно: използвайки този метод, имате нужда от изтеглено качване на шрифт в сайта и редактиране на CSS файл.
  3. Теми: много популярни теми включват вградени опции за персонализиране на вашите шрифтове (обърнете внимание – няма да покриваме тази опция, тъй като процесът ще варира в зависимост от темата, която използвате, но качествените премиум теми като темата Total WordPress ще предлагат онлайн документи, които лесно можете да следвате – като това ръководство за добавяне на персонализирани шрифтове в Общо)

Вариант 1 – Промяна на WordPress шрифтове с приставки

Ако не ни интересуват глобалните промени, можем да инсталираме WordPress плъгини, които ще променят шрифтовете на вашия сайт.

Характеристики на персонализираните приставки за шрифтове

Софтуерът с отворен код има предимство за интереса на общността, а WordPress също има това предимство. Няколко приставки за WordPress ви позволяват да добавяте персонализирани шрифтове. Как да изберем подходящ плъгин с толкова много? Какви са характеристиките на приставките за персонализирани шрифтове?

Ето няколко точки, които трябва да вземете под внимание:

  • Възможност за използване на персонализиран шрифт
  • Възможност за използване на повече от един шрифт
  • Целеви заглавки и компоненти
  • Бонус: възможност за промяна на настройките на шрифта от визуалния редактор

Това е всичко. Първата функция в списъка е много важна. Винаги можете да изтегляте шрифтове от сайтове като DaFont, Font Squirrel и т.н., но трябва да можете да ги качвате в WordPress.

Нека разгледаме няколко приставки за WordPress, които ви позволяват да качвате персонализирани шрифтове.

Персонализиращ шрифт

Персонализиращ шрифт

Този плъгин ви позволява да изтегляте шрифтове от Google и да ги прилагате към различни елементи на вашия блог. Например към заглавията или тялото на статията или страницата.

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

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

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

WP Google Fonts

WP Google Fonts

WP Google Fonts ви позволява да използвате каталога с шрифтове на Google. Едно от невероятните предимства на този плъгин е добавянето на близо 1000 шрифта на Google. Макар че можете да зададете на шрифтове Google ръчно, за много потребители е много по-лесно да използвате плъгин.

Как да инсталирате шрифтове с плъгин?

Да вземем, например, WP Google Fonts. Просто инсталирайте тази приставка от официалното хранилище на WordPress и отворете секцията Google Fonts.

WP Google Fonts

Тук ще видите панел за управление на шрифтове на Google. Изберете шрифтове и променете различни настройки, като например стила на шрифта, елементите, към които се прилага и т.н..

Вариант 2 – Инсталирайте ръчно шрифтове на WordPress

Чрез директивата @ font-face можете да свържете едно или няколко шрифта към вашия сайт. Но този метод има своите плюсове и минуси.

Професионалисти:

  • Чрез CSS можете да свързвате шрифтове във всеки формат: ttf, otf, woff, svg.
  • Файловете с шрифтове ще бъдат разположени на вашия сървър – няма да зависите от услуги на трети страни.

Против:

  • За правилната връзка с шрифтове за всеки стил, трябва да регистрирате отделен код.
  • Без да знаете CSS, можете лесно да се объркате.

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

Забележка: Преди да започнете, не забравяйте да създадете детска тема за вашия сайт. По този начин можете да направите всички редакции на темата на детето си, оставяйки основната си тема в такт, за да можете лесно да я актуализирате, ако е необходимо в бъдеще.

Стъпка 1: Създайте папка „шрифтове“

В рамките на вашата детска тема създайте нова папка „шрифтове“ под: WP-съдържание / теми / си дете-тематични / шрифтове

Стъпка 2. Качете изтеглените файлове с шрифт на вашия уебсайт

Това може да стане чрез контролния панел на вашия хостинг или чрез FTP.

Добавете всички файлове с шрифт в ново добавената папка шрифтове: WP-съдържание / теми / си дете-тематични / шрифтове вие създадохте.

Стъпка 3. Импортиране на шрифтове чрез таблицата за стилове на децата

Отворете файла style.css на вашата детска тема и добавете следния код в началото на CSS файла (след коментиране на дъщерната тема):

@ Шрифт лице {
семейство шрифтове: 'MyWebFont';
src: url ('шрифтове / WebFont.eot');
src: url ('fonts / WebFont.eot? #iefix') формат ('embedded-opentype'),
url ('fonts / WebFont.woff') формат ('woff'),
url ('fonts / WebFont.ttf') формат ('truetype'),
url ('fonts / WebFont.svg # svgwebfont') формат ('svg');
тегло на шрифта: нормално;
стил на шрифта: нормален;
}

Където MyWebFont е името на шрифта, а стойността на src свойството (данните в скоби в кавички) е тяхното местоположение (относителни връзки). Трябва да посочим всеки стил поотделно.

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

Стъпка 4. При добавяне курсив, напишете следното:

@ Шрифт лице {
семейство шрифтове: 'MyWebFont';
src: url ('шрифтове / WebFont-Italic.eot');
src: url ('fonts / WebFont-Italic.eot? #iefix') формат ('embedded-opentype'),
url ('fonts / WebFont-Italic.woff') формат ('woff'),
url ('fonts / WebFont-Italic.ttf') формат ('truetype'),
url ('fonts / WebFont-Italic.svg # svgwebfont') формат ('svg');
тегло на шрифта: нормално;
стил на шрифта: курсив;
}

Където всичко е едно и също, само ние прикрепихме свойството в стила на шрифта към курсив.

Стъпка 5. За да добавите смелия шрифт, добавете следния код:

@ Шрифт лице {
семейство шрифтове: 'MyWebFont';
src: url ('шрифтове / WebFont-Bold.eot');
src: url ('fonts / WebFont-Bold.eot? #iefix') формат ('embedded-opentype'),
url ('fonts / WebFont-Bold.woff') формат ('woff'),
url ('fonts / WebFont-Bold.ttf') формат ('truetype'),
url ('fonts / WebFont-Bold.svg # svgwebfont') формат ('svg');
шрифт: удебелен шрифт;
стил на шрифта: нормален;
}

Където сме задали свойството на теглото на шрифта да е удебелено.

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

Стъпка 6. За да свържете удебелен курсив, напишете следното:

@ Шрифт лице {
семейство шрифтове: 'MyWebFont';
src: url ('шрифтове / WebFont-Italic-Bold.eot');
src: url ('fonts / WebFont-Italic-Bold.eot? #iefix') формат ('embedded-opentype'),
url ('fonts / WebFont-Italic-Bold.woff') формат ('woff'),
url ('fonts / WebFont-Italic-Bold.ttf') формат ('truetype'),
url ('шрифтове / WebFont-Italic-Bold.svg # svgwebfont') формат ('svg');
шрифт: удебелен шрифт;
стил на шрифта: курсив;
}

Е, това е всичко. Сега сте свързали четири стила на шрифта към уебсайта си.

Но има една забележка – тази шрифтова връзка ще бъде показана неправилно в Internet Explorer 8. Утешението е, че все още има много малко хора, които използват IE8.

Преминаване на персонализирани шрифтове за WordPress

Какво е първото нещо, което потребителите забелязват, когато посещават вашия сайт? Правилно, неговият дизайн! По-голямата част от дизайна разчита на правилното използване на красиви шрифтове. Затова трябва да се грижите за шрифтовия дизайн на вашия сайт. Добавете код или използвайте някой от плъгините, споменати по-горе, за да вградите нов стил на шрифт. Кой начин ще изберете, зависи от вас.

Уверете се, че не използвате повече от два шрифта на един и същи сайт. Тъй като повече персонализирани шрифтове добавите към сайта, толкова по-бавна става скоростта на сайта.

Това е всичко, не се колебайте. 

Също така ще се радваме да чуем коя опция избирате да добавите персонализиран шрифт към уебсайта си и къде да намерите шрифта си.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map