Како локално учитати Гоогле фонтове у ВордПресс-у: ставка за оптимизацију пронађена у ГТметрик-у, Пингдом-у и Гоогле ПагеСпеед Инсигхтс

Ако ваша страница ВордПресс има Гоогле Фонт грешке у ГТметрик/Пингдом, учитавање Гоогле фонтова локално треба их исправити.


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

Пре увођења промена, направите потпуну сигурносну копију веб локације (или бар датотека које уређујете).

Гоогле-фонтови-ГТметрик

1. корак: Изаберите Гоогле фонт

У овом примеру ћемо користити Робото фонт са две тежине фонта: редовна (400) и подебљана (700).

Гоогле-одабир фонтова

Користите мање Гоогле фонтова – Смањите своје Гоогле фонтове на минимум (мање фонтова = мање захтева).

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

2. корак: Преузмите фонт

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

Преузми Гоогле фонтове

3. корак: Претварање фонтова у веб фонтове

Затим ћемо те датотеке фонтова (.ттф) претворити у датотеке са фонтом. Користит ћу Трансфонтер. Идите на њихову страницу и кликните Додавање фонтова, онда отпремајте само врсте фонта које ћете користити на својој веб локацији. Ја користим Робото-Регулар.ттф и Робото-Болд.ттф па имам и редовне и подебљане утеге. Пустите подешавања као подразумевана јер ВОФФ и ВОФФ2 покривају све главне прегледаче. Сада кликните претвори.

Трансфонтер-Гоогле-претворба фонтова

Изаберите само врсте фонта које ћете користити на веб локацији…

Гоогле-Фонтс-Цонверсион-Селецтион

Корак 4: Преузмите конвертиране датотеке фонтова

Након претварања фонтова, можете их преузети. У зип датотеци ће сваки фонт садржавати ВОФФ и ВОФФ2 формате (пошто смо преузели 2 фонта, имаћемо укупно 4 датотеке фонта).

ВОФФ-Гоогле-конверзија фонтова

Корак 5: Пошаљите датотеке фонтова у ВордПресс датотеке

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

Пример:

  • хттп://иоурвебсите.цом/вп-цонтент/уплоадс/фонтс/Робото-Регулар.вофф
  • хттп://иоурвебсите.цом/вп-цонтент/уплоадс/фонтс/Робото-Регулар.вофф2
  • хттп://иоурвебсите.цом/вп-цонтент/уплоадс/фонтс/Робото-Болд.вофф
  • хттп://иоурвебсите.цом/вп-цонтент/уплоадс/фонтс/Робото-Болд.вофф2

Заменити иоурвебсите.цом са сопственом веб страницом (и ХТТПС ако користите ССЛ). Идеално је да тестирате све 4 везе и проверите да ли су УРЛ адресе тачни (а такође их обавезно сачувајте негде).

Корак 6: Додајте прилагођени фонт у ЦСС

Затим ћемо додати ЦСС који сте добили унутар преузете зип датотеке назване стилесхеет.цсс. Ово је ЦСС код који ће повезати ваше фонтове са вашим постојећим ЦСС-ом и учинити их спремним за употребу.

Где се смешта ЦСС код субјективно, али можете да користите спољну табелу стилова или ВордПресс “ вп_енкуеуе_стиле функцију у функцији.пхп или на почетку вашег стиле.цсс датотека (или цустом.цсс ако имаш једну). Залепићу га у подразумевану датотеку стиле.цсс теме. Копирајте / залепите код у листу стилова и промените све релативне УРЛ-ове у апсолутне УРЛ-ове.

Подразумевани УРЛ-ови у стилесхеет.цсс:
срц: урл (‘Робото-Болд.вофф2’) формат (‘вофф2’),
урл (‘Робото-Болд.вофф’) формат (‘вофф’);

Промените их у:
срц: урл (‘хттп://иоурвебсите.цом/вп-цонтент/уплоадс/фонтс/Робото-Регулар.вофф2 ‘) формат (‘ вофф2 ‘),
урл (‘хттп://иоурвебсите.цом/вп-цонтент/уплоадс/фонтс/Робото-Регулар.вофф ‘) формат (‘ вофф ‘);

У основи, само укључите УРЛ мапе пре назива датотеке фонта.

Ово је опционо, али ако вам је драже, направите прилагођену класу да бисте лако користили фонт у постојећем ХТМЛ-у. Овде смо именовали наше часове робото_фонт и робото_болд_фонт. Да бисте то учинили, додајте ово у датотеку стиле.цсс (после горњег кода):

.робото_фонт {

породица фонтова: „Робото“, „Ариал“, санс-сериф;

}

.робото_болд_фонт {

породица фонтова: „Робото“, „Ариал“, санс-сериф;

фонт-веигхт: болд;

}

Корак 7: Тестирајте фонт

Сада направите пробну страницу и ставите следећи код у поље Текст едитор

Тестирање

Прилагођени тест фонта

Прилагођени тест фонта

Гоогле-тестирање фонтова

Прегледајте страницу. Ако сте то исправно урадили, требало би да видите нови прилагођени фонт! Први наслов је подразумевани фонт ваше веб локације, други и трећи су фонтови Гоогле фонтова које смо додали:

Локални-Гоогле фонтови

Корак 8: Подесите подразумевани фонт

Да бисте поставили овај стандардни фонт за вашу веб локацију, додајте овај ЦСС у датотеку стиле.цсс:

тело {

породица фонтова: „Робото“, „Ариал“, санс-сериф;

}

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

Корак 9: Увек има повратних фонтова

Лоша је пракса применити Гоогле Фонт као породицу фонтова. Уместо тога, требало би да наведете више фонтова, укључујући уобичајене фонтове као што су Ариал, Тимес Нев Роман како би прегледач могао да се врати на те фонтове само у случају да се фонт не учита или траје дуже..

Без резервног дела:
породица фонтова: ‘Робото’;

Са резервним фонтом:
породица фонтова: ‘Робото’, Ариал, Санс Сериф;

Сада, у случају да не успе да учита ваш Гоогле Фонтове, прегледач ће се вратити на Ариал фонт или подразумевани тип санс-сериф фонт-а у систему и неће проузроковати проблеме око приказивања фонта..

Поновно тестирајте своју веб страницу (у ГТметрик-у)

Не би требало да видите грешке у Гоогле фонтовима у њему …

Нев-ГТметрик-Репорт.пнг

Имате питања? Дај ми линију.

Често постављана питања

&# к2705; Како убрзате Гоогле фонтове?

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

&# к2705; Како претворити фонтове у датотеке са фонтом?

Користимо Трансфонтер.

&# к2705; Шта је са Елементор прилагођеним фонтовима?

Елементор прилагођени фонтови такође могу локално угостити Гоогле фонтове и уграђени су у Елементор Про. Ово можете да користите за отпремање датотека са фонтом.

&# к2705; Који додаци помажу у оптимизацији фонтова?

ВП Роцкет, ОМГФ, Аутоптимизе и Перфматтерс могу вам све помоћи да оптимизирате фонтове.

&# к2705; Шта је са унапријед дохваћањем и претповезавањем фонтова?

Они могу убрзати фонтове помажући прегледачима да их боље предвиде. Користимо додатак Перфматтерс од стране Кинста-а за унапред дохваћање и пре-повезивање фонтова, али можете користити и ВП Роцкет или Препарт Ресоурце Ресоурцес Хинтс додатак.

Живели,
Усама

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