Додавање прилагођених фонтова у ВордПресс


Како додати прилагођене фонтове у ВордПресс


Одабир правог фонта за ВордПресс веб локацију је средишњи дио веб дизајна и брендирања веб страница.

Као боје, слике и други елементи, типографија игра велику улогу како посетиоци доживљавају вашу веб локацију.

Срећом, ВордПресс фонтови једна су од многих ствари које слободно можете прилагодити. Можете користити скоро било који бесплатни прилагођени фонт на вашој ВордПресс веб локацији коју желите.

Покрићемо све што требате знати о ВордПресс фонтовима:

  • А) Како додати ручне датотеке прилагођене фонтове у ВордПресс
  • Б) Како додати прилагођене фонтове у ВордПресс (путем додатка)
  • Зашто користити прилагођене фонтове на ВордПресс-у
  • Где да пронађете прилагођене фонтове
  • Закључак

Contents

А) Како ручно додати прилагођене фонтове у ВордПресс

Када је у питању додавање прилагођених фонтова у ВордПресс ручно, имате три главне опције: ХТМЛ, ЈаваСцрипт и ЦСС. Постоје предности и недостаци сваке методе, а који је прави за вас, зависи од вашег подешавања. Не брините, детаљно ћемо проћи кроз сваки од њих.

1. Коришћењем ЦСС и @увоз

Кренимо од најмање препоручене методе. Ако планирате да инсталирате прилагођене типове података из Гоогле фонтова, можда сте приметили да на њему постоји картица са ознаком @увоз. Услуга вам даје део ЦСС кода.

импорт таб у гоогле фонтима

Можете га узети таквог какав је и уметнути га у заглавље (детаљније о томе у даљем тексту) или га копирати без >заграде за почетак теме ваше теме (или још боље, дечије теме) стиле.цсс датотека.

/ *
Назив теме: Двадесет седамнаесто дете
УРИ тема: хттпс://вордпресс.орг/тхемес/твентисевентеен/
Шаблон: двадесет седамнаест
Аутор: ВордПресс тим
Аутор УРИ: хттпс://вордпресс.орг/
Верзија: 1.0

* /

@импорт урл ('хттпс://фонтс.гооглеапис.цом/цсс?фамили=Опен+Санс|Робото');


/ * додатни ЦСС иде овде * /

Ако то учините, учитаћете фонт на вашу веб страницу са табеле стилова. Чини се као једноставно решење, зар не? Зашто се то онда најмање препоручује?

Разлог су проблеми са перформансама. Користећи @увоз више није препоручени начин рада јер спречава прегледаче да преузимају више стилова одједном. Последица је: спорије време учитавања страница. Склони се од ње ако можеш.

2. Коришћење датотеке шаблона ВордПресс

Други начин да се фонтови пронађу на вашој веб локацији је да узмете код који нуде библиотеке фонтова и копирате их у своју хеадер.пхп датотека шаблона. Већина стандардних ВордПресс тема га има.

Обавезно је поставите негде између и заграде. На тај начин ће се ваш фонт учитавати сваки пут када се учита страница.

унесите код гоогле фонтова у заглавље вордпресс-а

Ако користите дечију тему, обавезно копирајте матичну тему хеадер.пхп датотеке у директоријум дечије теме и унесите тамо промене.

Неке теме долазе са подешавањима која вам омогућавају да додате прилагођени код у заглавље и подножје преко помоћног прозора. Ово је такође одржива опција.

3. Коришћењем @ фонт-фаце

До сада смо разговарали само о томе како користити прилагођене фонтове у ВордПресс-у који се налазе негде другде, наиме сервере Гоогле-а и Адобе-а. Међутим, такође је могуће хостинг фонтова на својој веб локацији и нудити их прегледачима посетилаца одатле.

Да бисте то учинили, прво морате да преузмете дотични фонт. Сећате се дугмета за преузимање на Гоогле фонтима? Тај ће вам сад постати користан. Остали провајдери вам такође дозвољавају преузимање фонтова.

Када то учините, обавезно га набавите у формату веб фонта. То значи ТТФ, ОТФ или ВОФФ. Пронаћи ћете више информација о њему овде. Ако немате одговарајући формат веб фонта, можете је такође користити ова услуга да бисте претворили свој фонт у подржани.

Након што припремите датотеке са фонтом, морате их отпремити на своју ВордПресс локацију путем ФТП-а. Добро место за њихово смештање налази се у поддиректоријуму под називом ваша деца фонтови (креативно, знамо).

Након тога, морате да уметнете фонт у своју стилску листу преко @ фонт-фаце. Ево како то изгледа:

@ фонт-фаце {
породица фонтова: Робото;
срц: урл (хттп: //лоцалхост/вордпресс/вп-цонтент/тхемес/твентисевентеен-цхилд/фонтс/Робото-Регулар.ттф);
тежина слова: нормално;
}

Не заборавите да на својој веб локацији замените назив фонта и адресу за његову локацију. Након тога ће бити употребљив ваш нови прилагођени фонт.

Међутим, ово такође није најбоље решење, посебно у погледу перформанси. Гоогле-ови сервери су вероватно бржи од ваших и зато је уточиште прилагођених фонтова вероватно боље решење.

4. Енкуеуеинг Фонтови - „ВордПресс начин“

Ако заиста желите да додате прилагођене фонтове у ВордПресс на правилан начин, користићете свој фунцтион.пхп датотека (унутар директорија тренутно активне теме) и функције  вп_енкуеуе_сцрипт или вп_енкуеуе_стиле.

Уз њихову помоћ можемо узети исјечке кода које пружају фонт странице. Међутим, уместо да их копирамо у датотеку, додаћемо их у заглавље преко функције.

У чему је разлика између вп_енкуеуе_сцрипт и вп_енкуеуе_стиле? Као што њихова имена сугерирају, једна је за додавање скрипти, а једна за стилске таблице. Који је прави начин коришћења зависи од тога како се ваши прилагођени фонтови обезбеђују из извора.

На пример, Гоогле фонтови вам дају фонт као стилске таблице. У том случају бисте их додали на своју ВордПресс локацију на следећи начин:

функција адд_гоогле_фонтс () {
вп_енкуеуе_стиле ('гоогле_веб_фонтс', 'хттпс://фонтс.гооглеапис.цом/цсс?фамили=Опен+Санс|Робото');
}

додавање ('вп_енкуеуе_сцриптс', 'адд_гоогле_фонтс');

За разлику од тога, фонтови из Адобе Едге Веб Фонтс долазе као ЈаваСцрипт. Према томе, да бисте их освојили на својој веб локацији, код би изгледао овако:

функција адд_адобе_фонтс () {
вп_енкуеуе_сцрипт ('адобе_едге_веб_фонтс', '//усе.едгефонтс.нет/опен-санс.јс');
}

додавање ('вп_енкуеуе_сцриптс', 'адд_адобе_фонтс');

Није било тако тешко, зар не? Осим тога, добијате додатне бодове за то како то радите на ВордПресс начин.

5. Назовите прилагођене фонтове у свом листу стилова

Сада када су фонтови додани на вашу веб локацију, званично их можете користити. Да бисте то учинили, преостало је само да додате декларацију за нови фонт у листу са стиловима. На пример, да бисте променили фонт за ознаке заглавља, користили бисте нешто овако:

х1,
х2,
х3,
х4,
х5,
х6 {
породица фонтова: 'Робото';
}

Белешка: Обратите пажњу на то како услуга коју користите одређује ЦСС декларацију за ваше фонтове. На нашој пробној страници, изгледа да нисмо могли да Адобе Едге Веб Фонтови раде јер у ЦСС-у зову Опен Санс опен-санс насупрот 'Опен Санс' у Гоогле фонтовима.

То је то. Сада знате како ручно додати прилагођене фонтове у ВордПресс. Честитајте себи, ово је неко знање следећег нивоа! Очито су исте акције могуће и путем додатака. О томе ћемо разговарати следеће.

Б) Како додати прилагођене фонтове у ВордПресс преко додатка

Сфера ВордПресса не би била оно што јесте да није било неколико додатака за додавање прилагођених фонтова на платформу. Прећи ћемо на употребу Лаки Гоогле фонтови, који је један од најпопуларнијих додатака у овој области.

1. Инсталирајте додатак

Први корак је инсталација додатка. Да бисте то учинили, пријеђите на Додаци> Инсталирај ново. Затим потражите име додатка. У резултатима претраге кликните на Инсталирај одмах и активирајте додатак након што се нађе на вашој веб локацији.

2. Додајте / промените фонтове на својој веб локацији

Када је додатак активан, налазићете нову ставку менија која се зове Типографија испод Изглед> Прилагоди.

мени за типографију у програму за прилагођавање речи

Када кликнете на њу и изаберете Подразумевана типографија, наћи ћете листу контрола за промену фонта вашег одломака и наслова.

једноставна подешавања фонтова за гоогле у алатки за прилагођавање речи

Употреба истих је заиста једноставна. Само кликните падајући мени где пише Уреди фонт за део ваше веб локације за који желите да га промените. То вам омогућава приступ овом менију:

лако гоогле фонтови мењају фонт

Овде је најважнији део онај испод Породица фонтова. Овде можете одабрати нови тип фонта из целе библиотеке Гоогле фонтова (користите Скрипта / подскуп да ограничите избор фонта на оне са посебним словима).

Фонтови су поредани стандардним, сериф, санс-сериф, дисплејом, рукописом и моноспаце. Међутим, можете их и једноставно претражити по имену.

Када кликнете на фонт, можете прегледати промене у стварном времену с десне стране.

променио прилагођени фонт у лако гоогле фонтима

3. Конфигуришите Фонт

Једном када одаберете фонт, постоји много опција за додатно прилагођавање типографије.

Пре свега, можете да промените тежину / стил фонта у истоименом менију. Ово контролише дебљину слова.

Даље, под Декорација текста, можете да додате подвлачење, прецртавање и подвлачење. Тект Трансформ такође вам омогућава да поставите све капке, мала слова или велика слова свако прво слово. Под Изглед на врху странице, можете такође контролисати боју фонта, боју позадине, величину фонта, висину линије и размак слова.

подешавања изгледа у једноставним гоогле фонтима

Коначно, Позиционирање омогућава вам да промените друга подешавања као што су маргина, подметач, обруб, обруб ивице приказа.

поставке позиционирања у једноставним гоогле фонтима

Укратко, требали бисте бити у могућности да у потпуности прилагодите фонтове на вашој веб локацији по вашој жељи. Лако, зар не? Не заборавите да погодите Спреми и објави на врху када сте задовољни променама.

Не ради, шта да радим?

Понекад нисте у могућности да промените неке фонтове на својој веб локацији. То се обично дешава када тема коју користите садржи нестандардне ЦСС класе и селекторе за њихово обликовање.

На пример, у теми Двадесет шеснаест, наслови на блоговима нису само дефинисани као Х1, већ имају и ЦСС класу која се назива .ентри-титле. Из тог разлога, додатак их не може променити.

Да бисте решили овај проблем, морате да створите тзв контрола фонта испод Подешавања> Гоогле фонтови.

додајте контролу фонта једноставним гоогле фонтима

Можете да повежете ЦСС селекторе са новом контролом и присилно прегласавање када је то потребно. Након што то учините, нова контрола фонта доступна је као додатна опција у програму ВордПресс Цустомизер под Тема Типографија. Лаганица.

Остали прилагођени фонтови ВордПресс додаци

Постоје и други ВордПресс додаци за додавање прилагођених фонтова:

  • Користите било који фонт - Помаже вам да користите отпремљене фонтове без икаквог ЦСС-а. На њему се налазе фонтови на вашем сопственом серверу, а такође нуди алате за конверзију формата фонтова.
  • Типекит фонтове за ВордПресс - Користите фонтове компаније Адобе Типекит услуга (за коју се морате пријавити). Омогућује вам унос уграђених кодова и прилагођених ЦСС-а директно у додатак.
  • ТК Гоогле Фонтови - Алтернативно решење за уградњу Гоогле фонтова који прилично помера искуство Гоогле Фонтова у бацкПорд ВордПресс. Испробајте фонтове са прегледом и прилагођеним текстом, а затим га промените унутар ВордПресс Цустомизер-а.

Зашто користити прилагођене фонтове на веб локацији ВордПресс?

Типографија је сама по себи наука и нећемо вам моћи дати потпуни курс о коришћењу фонтова у веб дизајну овде. Уосталом, не ради се само о фонту, већ ио величини, нагибу, дебљини и многим другим стварима. Међутим, ми моћи Покријте зашто је коришћење прилагођених фонтова на вашем месту ВордПресс добра идеја.

1. Типографија је део првог утиска

Пре свега, фонт који користите утиче доста на то како се види ваша веб локација. Да ли је ваша веб локација забавна и разиграна? Да ли сте пословни професионалац? Посетиоци то одлучују у једном погледу и ваша типографија игра велику улогу у њиховој перцепцији.

2. Фонтови имају много већи утицај него што мислите

То може утицати на вашу способност учења, меморисања текстова, па чак и на ваше расположење.

На пример, у једном истраживање, примећено је да ако желите да повећате време проведено на читању неког текста, треба да користите сериф фонт. Међутим, ако желите да прочитате више за кратко време, пребаците се на санс-сериф фонт.

Друга студија показала је људима исте упуте за вежбање у различитим типовима знакова. Затим су питали учеснике да процене колико ће им требати да испуне наведена упутства. Фасцинантно, они са сложенијим фонтом претпостављали су да ће им требати дуже него групи с једноставнијим фонтом. Као посљедица тога, мање је вјероватно да ће се придржавати рутине вјежбања.

Где да пронађете прилагођене фонтове

1. Користите Гоогле фонтове да бисте пронашли прилагођену типографију

Прва услуга коју ћемо погледати је Гоогле фонтови. Као што име сугерира, то је Гоогле-ова услуга која нуди 800+ различитих фонтова. Бесплатно за употребу. За свакога.

Ево како да га употребите:

2. Пронађите одговарајући фонт

Када први пут отворите страницу Гоогле фонтови (само је упишите у Гоогле претрагу), видећете следеће:

како додати прилагођене фонтове у почетну страницу вордпресс гоогле фонтове

Корисничко сучеље је направљено да вам помогне да пронађете прави фонт за своју сврху. Ако већ имате на уму фонт, једноставно можете уписати његово име у поље за претрагу на десној страни.

Ако не, можете да филтрирате фонтове на много различитих начина, на пример, по категорији:

  • Сериф - Значи фонтове са шкакљивим линијама на крају, као Тимес Нев Роман.
  • Санс Сериф - Једноставни фонтови без шкљоцања, попут Хелветице. Фонтови који се користе на овој веб локацији су пример тога.
  • Приказ - Тифтови који се могу користити у већим величинама, попут наслова.
  • Рукопис - Да ли желите да ваша типографија изгледа као да је написана руком? Тада је ово ваше подешавање.
  • Моноспаце - Типографија у којој сви ликови заузимају исти простор, овако.

Остали филтри укључују:

  • Сортирање - Разврстајте фонта по тренду, популарним, датумима доданим или по абецеди.
  • Језици -Ограничите избор слова на језицима који нису написани латиничним писмом, као што су арапски, тајландски или вијетнамски.
  • Број стилова -Изаберите колико вам је стилова потребно, значи да ли је фонт доступан у различитим дебљинама, курзив, подебљан и још много тога.
  • Дебљина - Одаберите жељену дебљину фонта.
  • Нагнути - Исто као и дебљина, али за нагиб. Распон је од правог до скоро хоризонталног.
  • Ширина - Филтрирајте фонтове по ширини слова и размаку.

Када примените било који филтер, резултати претраге прилагођавају се у реалном времену. На левој страни ћете видети доступне фонтове у вашој категорији и примере реченица.

Када задржите показивач миша над фонтом, помоћу падајућих менија на врху можете да прикаже Гоогле Фонтове пример пример, читав алфабет или бројеве. Можете једноставно кликнути и на поље реченице и написати шта желите.

уређивање узорка текста у гоогле фонтима

Поред тога, постоје опције за промену стила и величине фонта. Када унесете промене, добијате и могућност да их примените на све резултате претраге. На крају, погледајте страницу с појединостима о фонту кликом на Види примерак.

страница детаља о фонту у гоогле фонтима

3. Додајте Фонтове у своју колекцију

Ако вам се свиђа одређени фонт, можете користити црвени знак плус у горњем десном углу да бисте га додали у своју колекцију. Тако ћете отворити мени на дну где ћете видети све ваше одабране фонтове.

фонтови изабрани у гоогле фонтима

Имајте на уму да можете додати више породица фонтова. Ово има смисла, на пример, када бирате један за копију тела и други за наслове.

4. Прилагодите поставке фонта

Након што сте задовољни са својом колекцијом, кликните на доњи мени. То ће отворити овај екран:

подешавања фонта у гоогле фонтима

Као што видите, можете пронаћи неке делове кода за уградњу и употребу фонтова на вашој веб локацији. То ће касније постати важно. За сада кликните на картицу која каже Прилагоди. Ако вас то одведе до овог менија:

прилагодите фонтове у гоогле фонтима

Овде можете да одаберете стилове дотичних фонтова. Ово је важно ако желите да користите фонтове различитих величина, што је често случај.

Међутим, будите опрезни: што више стилова мора учитати ваша веб локација, то ће се и успорити (Гоогле Фонтови вам чак у горњем десном углу дају назнаку брзине учитавања тренутне колекције). Дакле, размислите шта вам заиста треба и само то изаберите. Успут, постоји више начина на које можете убрзати ВордПресс.

У случају да вам треба неки други језик осим стандардног латиничног писма, обавезно га одаберите и на дну.

одаберите језике фонта у гоогле фонтима

Поред тога, све што требате знати су двије иконе стрелице на врху.

дугме за преузимање и дељење у гоогле фонтима

Она са леве стране омогућава вам да прегледате и делите своју колекцију фонтова. Када се одлучите за то, отвара продужену страницу на коју можете уметнути огледни текст и видети га у свим фонтима одједном. Ова страница је такође добра за поделу са људима.

Важније је дугме за преузимање поред њега. Кликом на њега можете преузети датотеке фонта да бисте их користили на радној површини (на пример, у Пхотосхопу). Употреба Скифонтс да их редовно ажурирају.

Касније ћемо вам показати и начин на који те датотеке учитавате на свој сервер и хост фонтове директно на вашој веб локацији. Имајте то на уму за будућност. За сада ћемо вам показати другу сличну библиотеку фонтова.

Додатни извор за прилагођене фонтове

  • 15+ веб сигурних фонтова које препоручујемо

Уз горе наведено, требали бисте бити у могућности да пронађете нешто за себе. Последњи савет - ако не знате како правилно комбиновати фонтове, користите Фонт Паир где су дизајнери урадили ногавице за вас.

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