Искате ли да научите как да добавяте персонализирани шрифтове към уебсайт на WordPress?
Защо да правите блога си скучен, като използвате стандартни шрифтове? Нека вашият блог говори за вашата жизнена личност и темите, които покривате с голямо разнообразие от персонализирани шрифтове. Персонализираните шрифтове са страхотна функция, която прави вашия блог да изглежда за предпочитане пред другите.
Нека си го кажем; всички обичаме блогове и уебсайтове с правилните шрифтове. Те не само украсяват уебсайта, но и помагат за привличането на потребителя към вашето съдържание. Изборът на стандартни WordPress шрифтове обаче е ограничен и зависи от темата, която използвате. Добрата новина е, че можете да ги добавите ръчно или с WordPress плъгини специализирана.
И тук възникват два въпроса: къде да получите персонализирани шрифтове за WordPress и как да инсталирате персонализирани шрифтове на уебсайта си.
Нека разберем.
Защо трябва да използвам персонализирани шрифтове?
Отминаха дните, когато Times New Roman и Georgia се смятаха за единствените шрифтове за текст на уебсайтове. През последните няколко години пространството за шрифтове се промени напълно с появата на шрифтове като напр Google Fonts и други.
Днес има стотици безплатни шрифтове, информационни и учебни помагала и ресурси за дизайн, достъпни в Интернет. За разлика от Adobe Illustrator, Photoshop и други класически приложения, WordPress не ви дава пълен контрол върху шрифтовете по подразбиране. Само определени теми на WordPress избират да поддържат и използват персонализирани шрифтове.
Ето защо в тази статия ще научите как да намерите подходящи персонализирани шрифтове и да ги използвате на вашия уебсайт на WordPress.
Значението на използването на персонализирани шрифтове
Защо да променяте шрифтове, отстъп на думата, разстояние между редовете, разстояние между буквите или наситеност на шрифта, питате? Някои проучвания обаче показват това типографията подобрява разбирането на четенето.
Много зависи от конструкцията на шрифтовете. На съзнателно и подсъзнателно ниво – всеки оценява съдържанието на уеб страница по дизайн.
Дизайнът на шрифта засяга читателите, дори и да не му обръщат внимание. Отказването от дизайна на шрифтове означава отказ от самата разработка! Настроението на читателя зависи от това. Шрифтът го прави по-лесен за четене или принуждава потребителите да напуснат страницата.
Всички уеб браузъри включват набор от шрифтове по подразбиране. Това означава, че ако шрифтът не е посочен в CSS на страницата, ще се използва стандартната версия. Все още можете да използвате шрифтовете по подразбиране, но те затрудняват потребителите. Ето защо е важно да използвате персонализиран шрифт. Ако вашата тема на WordPress не ви дава опции за промяна на шрифта, има много уебсайтове и инструменти, които могат да ви помогнат.
Алтернативи на Google Fonts
Много от вас знаят Google шрифтове. Има още много уебсайтове, където можете да намерите красиви шрифтове. Някои от тях са безплатни за лична употреба. Ако имате нужда от търговска употреба, ще ви е необходим лиценз. Google Fonts и Adobe Edge Fonts са безплатни. Ето защо те не са толкова уникални.
Ето няколко други ресурси за намиране на шрифтове за безплатна и комерсиална употреба:
- TemplateMonster — На уебсайта TemplateMonster ще намерите всичко необходимо за уеб дизайн. Има също много шрифтове и пакети шрифтове за лична употреба на ниска цена. Освен това, за да ви помогнем да изберете, всички шрифтове, представени в брошури или рамки. Всеки шрифт е представен и с търговски лиценз.
- MyFonts — MyFonts в момента предлага най-голямата селекция от шрифтове в света. Цените тук обаче също са в горния сегмент. Така че, ако имате ограничен бюджет, това може да не е за вас.
- FontSpring — Fontspring продава нови шрифтове за търговска употреба. Но в почти всяко семейство 1-2 безплатни шрифта могат да се използват за лични цели. Освен това има отделен раздел с безплатни шрифтове. Колекцията е жизнена. Но ще трябва внимателно да проучите информацията за лиценза за конкретен шрифт, преди да изтеглите.
- cufonfonts — Това също е огромна колекция от различни шрифтове. Изберете който и да е и ще видите страница с подробна информация за него. Има много безплатни шрифтове и те са разделени на отделни секции. Системата за сортиране на CufonFonts е доста гъвкава и удобна. Освен това е включена поддръжка на Webfont.
- Dafont — Друга достъпна колекция от 3 безплатни шрифта. Повечето от тях са предназначени само за лична употреба. Страхотна функция на DaFont е система от категории. Можете да изберете шрифтове в стила на комикси, видеоигри, ретро и т.н.
Изборът на шрифтове е много примамлив, защото всички са красиви. Но не трябва да избирате много. Не използвайте повече от два шрифта на един сайт уеб. Тогававъншен вид на вашия уебсайт ще бъде последователен. След като изберете шрифтовете си, не забравяйте да качите файловете за всеки стил, който ще използвате (обикновен, получер, курсив и т.н.).
След като сте избрали подходящия шрифт за вашия уебсайт, нека да разберем как да го добавим.
Как да добавите персонализирани шрифтове към WordPress
Има няколко начина за добавяне на шрифтове към уебсайт на WordPress:
- Plugins : в този случай различно WordPress плъгини се използват за улесняване на процеса.
- ръчно : като използвате този метод, имате нужда от изтегляне на шрифт от сайта и промяна на CSS файла.
- теми: Много популярни теми имат вградени опции за персонализиране на вашите шрифтове (забележка – няма да покриваме тази опция, тъй като процесът ще варира в зависимост от темата, която използвате.
Вариант 1 – Променете шрифтовете на WordPress с плъгини
Ако не ни интересуват глобалните промени, можем да инсталираме WordPress плъгини което ще промени шрифтовете на вашия уебсайт.
Характеристики на плъгините за персонализирани шрифтове
Софтуерът с отворен код има предимство за интереса на общността, а WordPress също има това предимство. Няколко плъгини за WordPress ви позволяват да добавяте персонализирани шрифтове. Как да изберем подходящ плъгин, когато има толкова много? Какви са характеристиките на приставките за WordPress за персонализирани шрифтове?
Ето някои точки, които трябва да имате предвид:
- Възможност за използване на персонализиран шрифт
- Възможност за използване на множество шрифтове
- Заглавки и целеви компоненти
- Бонус: възможността за промяна на настройките на шрифта от визуалния редактор
Това е всичко. Първата характеристика в списъка е много важна. Все още можете да изтегляте шрифтове от уебсайтове като DaFont, Font Squirrel и др., но трябва да можете да ги качвате в WordPress.
Нека разгледаме някои плъгини за WordPress, които ви позволяват да качвате персонализирани шрифтове.
1. По-добро страхотно шрифт
Тази приставка за WordPress ще позволи на потребителите си автоматично да комбинират най-новата версия на шрифтове Better Font Awesome с CSS, къси кодове и други. В допълнение, този приставка за WordPress се актуализира автоматично.
Ще намерите като функции: редовни актуализации, генератор на шорткод, съвместимост с други плъгини на WordPress и др ...
Изтегляне | демонстрация | уеб хостинг
2. Google шрифтове за WordPress
Тази приставка за WordPress се състои от специални шрифтове 877, които ще ви позволят да използвате всички шрифтове на вашите уебсайтове на WordPress. Благодарение на визуализацията си в реално време, той ще ви позволи да видите как ще изглежда уебсайтът ви, след като шрифта се приложи.
Освен това ще можете да го запишете и редактирате на фронта, когато намерите комбинацията, която ще ви хареса.
Характеристиките му включват: визуализация в реално време, a доста напреднали SEO, многоезична поддръжка, поддръжка за повече 870 + Google шрифтове, лесни актуализации и други.
Изтегляне | демонстрация | уеб хостинг
3. Приставка за шрифтове
Fonts Plugin е безплатен плъгин за WordPress, който позволява на потребителите да имат достъп до библиотеките на Google Fonts и Adobe Fonts. С този плъгин за WordPress можете да избирате от над 1000 шрифта на Google и Adobe, да използвате множество шрифтове на уебсайта си и да тествате различни опции с функцията за предварителен преглед в реално време на приставката в инструмента за персонализиране на WordPress.
За повече начини да персонализирате типографията на вашия уебсайт, като размер на шрифта, разстояние между буквите и височина на редовете, можете да надстроите до премиум версията, Приставка за шрифтове Pro.Изтегляне | демонстрация | уеб хостинг
4. Лесни Google шрифтове
Easy Google Fonts е един от най-добрите WordPress плъгини за персонализиране на типографията на вашия уебсайт. Подобно на приставката за шрифтове, тя ви позволява да избирате от стотици шрифтове на Google и да ги визуализирате в инструмента за персонализиране, преди да ги добавите към уебсайта си.
Въпреки че предоставя достъп до по-малък брой шрифтове на Google, той е уникален с това, че ви позволява да създавате персонализирани контроли и правила за шрифтове в административната област, които веднага ще се появят в инструмента за персонализиране на WordPress.
Изтегляне | демонстрация | уеб хостинг
Вариант 2 – Инсталирайте ръчно персонализирани шрифтове на WordPress
Използвайки директивата @font-face, можете да свържете един или повече шрифтове към вашия уебсайт. Но този метод има своите плюсове и минуси.
Avantages:
- Благодарение на CSS можете да свържете шрифтове от всякакъв формат: ttf, otf, woff, svg.
- Файловете с шрифтове ще бъдат разположени на вашия сървър – няма да разчитате на услуги на трети страни.
недостатъци :
- За правилната връзка на шрифта за всеки стил, трябва да регистрирате отделен код.
- Без да знаете CSS, можете лесно да бъдете объркани.
Но това не е истински проблем, ако можете просто копирайте готовия код и къде трябва да посочите своите стойности.
Ремарк : Преди да започнете, уверете се създайте детска тема за вашия уебсайт. По този начин можете да направите всички промени в детската си тема, като оставите основната си тема, за да можете лесно да я актуализирате, ако е необходимо в бъдеще.
Стъпка 1: Създайте папка "fonts".
Във вашата детска тема създайте нова папка "fonts" под: wp-content/themes/your-child-theme/fonts
Стъпка 2. Качете изтеглените файлове с шрифтове на вашия уебсайт
Това може да стане чрез вашия хостинг контролен панел или чрез FTP.
Добавете всички файлове с шрифтове към новодобавената папка с шрифтове: wp-content/themes/ Във вашата детска тема създайте нова папка "fonts" под: wp-content/themes/your-child-theme/fonts които сте създали.
Стъпка 3. Импортирайте шрифтове чрез таблица със стилове на дъщерна тема
Отворете файла style.css на вашата дъщерна тема и добавете следния код в началото на CSS файла (след коментара на дъщерната тема):
@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont.eot');
src: url('fonts/WebFont.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont.woff') format('woff'),
url('fonts/WebFont.ttf') format('truetype'),
url('fonts/WebFont.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: normal;
}Où MyWebFont е името на шрифта и стойността на свойството src (данните в скоби в кавички) е тяхното местоположение (относителни връзки). Трябва да посочим всеки стил поотделно.
Тъй като първо свързваме нормалния стил, ние задаваме свойствата font-weight и font-style на нормално.
Стъпка 4. При добавяне курсив, напишете следното:
@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic.eot');
src: url('fonts/WebFont-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic.woff') format('woff'),
url('fonts/WebFont-Italic.ttf') format('truetype'),
url('fonts/WebFont-Italic.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: italic;
}Когато всичко е същото, ние сме единствените, които прикачат свойството за стил на шрифта към курсив.
Стъпка 5. За да добавите удебеления шрифт, добавете следния код:
@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Bold.eot');
src: url('fonts/WebFont-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Bold.woff') format('woff'),
url('fonts/WebFont-Bold.ttf') format('truetype'),
url('fonts/WebFont-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: normal;
}Където задаваме свойството font-weight на удебелен шрифт.
Не забравяйте да посочите правилното местоположение на файловете с шрифтове за всеки стил.
Стъпка 6. За да свържете получер курсив, въведете следното:
@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic-Bold.eot');
src: url('fonts/WebFont-Italic-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic-Bold.woff') format('woff'),
url('fonts/WebFont-Italic-Bold.ttf') format('truetype'),
url('fonts/WebFont-Italic-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: italic;
}Е, това е всичко. Сега, когато сте свързали четири стила на шрифта към вашия уебсайт.
Но има една забележка: тази връзка с шрифтове няма да се показва правилно в Internet Explorer 8. Утехата е, че все още има много малко хора, които използват IE8.
Други препоръчани ресурси
Също така ви каним да се консултирате с ресурсите по-долу, за да отидете по-далеч в управлението на вашия уебсайт и блог.
- 10 WordPress плъгина за акордеон за уебсайт
- Как да добавите няколко колони в WordPress
- Някои плъгини за интегриране на услугите на Google в блога си
- 5 WordPress приставки за показване на известия
- Как да използвате различни фон в WordPress
Заключение
Кое е първото нещо, което потребителите забелязват, когато посетят вашия уебсайт? Точно така, дизайнът му! Повечето от дизайна разчитат на правилното използване на красиви шрифтове. Така че, трябва да се погрижите за дизайна на шрифта на вашия уебсайт. Добавете код или използвайте един от споменатите по-горе плъгини, за да вградите нов стил на шрифта. Как ще го изберете зависи от вас.
Уверете се, че не използвате повече от два шрифта на един и същ уебсайт. Тъй като колкото повече персонализирани шрифтове добавите към уебсайта, толкова повече скоростта на уебсайта ще спадне.
Това е всичко за тази статия, която ви показва как да добавите персонализирани шрифтове към уебсайт на WordPress. Каним ви да опитате. Ако имате някакви притеснения или предложения, моля, уведомете ни в рамките на това Връзка.
Ще можете обаче да се консултирате с нас грабене на ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Междувременно, споделете тази статия във вашите различни социални мрежи.
...