Нестандартни уеб шрифтове в оформлението. Google шрифтове и webfont. Как да свържете шрифт от Google Fonts? Добавяне на уеб шрифтове на Google към тема на WordPress

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

Не е необходимо да качвате файла с шрифта на хостинга. Достатъчно е да се регистрирате задължителен HTMLкод в заглавката на сайта и в името на новия шрифт. Шрифтовете могат да бъдат свързани не само към WordPress сайт, но и към всеки друг сайт.

Как да свържете Google Fonts с уебсайт

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

Можете да зададете други параметри, ако е необходимо: дебелина (дебелина на шрифта), наклон (наклон), ширина (ширина на шрифта).

Също така трябва да изберете кирилицата, ако вашият сайт е на руски език: кирилица (кирилица) или разширена кирилица (разширена кирилица).

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

Преместваме курсора на мишката върху шрифта, който искаме да инсталираме на сайта, след което се появяват допълнителни настройки/параметри: Бързо използване ( бърза употреба), Pop out (вижте шрифта в отделен прозорец) и Add to Collection (добавете към колекцията).

Изберете " Бърза употреба„и виждаме от дясната странаджаджа за скоростомер. Показва колко бързо се зарежда избраният шрифт. Колкото по-ниско е числото на този скоростомер, толкова по-добре.

Още по-ниско можете да изберете една от трите опции за инсталиране на шрифта на сайта: стандартен, @import или javascript.

Има инструкции за всяка опция. английски, как правилно да свържете шрифта към сайта. Ще ви покажа първия вариант" стандартен“, защото е по-просто.

Копирайте реда, маркиран в червено, и след това го поставете във файла header.php между таговете ….

След това отваряме файла style.css, намираме шрифта, който трябва да се промени, и добавяме нов. Просто пишем името на новия шрифт. Ние поставяме шрифта на Google Fonts в кавички, например семейство шрифтове: "Aladin",Arial,Helvetica,Sans-serif.

Ако не разбирате нищо от това, което казах тук, гледайте видеоклипа, в който говоря подробно, как да свържете Google Font към WordPress сайт

______________________
За урок 204. без плъгин

Поздрави, скъпи читатели. Днес ще говорим за google шрифтове (google уеб шрифтове), как да ги изтеглите и да ги свържете към сайта.

Да отидем на сайта www.google.com/fonts/, във филтъра вдясно избираме: 1. желаната категория, 2. ако е необходимо, ги сортираме и 3. избираме езика, от който се нуждаем (ако имате нужда от руски шрифт в менюто вляво, изберете кирилица).

Така че избрахме шрифта, сега трябва да изберем неговия стил, за да направите това, разгънете панела в долната част ( Отворете чекмеджето за избор) и отидете на раздела ПЕРСОНАЛИЗИРАНЕи изберете стиловете и езиците, от които се нуждаете.

За да изтеглите, щракнете върху бутона изтегляне.

Свързване на изтегления шрифт

Копирайте шрифтовете, съдържащи се в архива, в папката /fonts, която трябва да е в същата директория като папката /css на вашия HTML сайт.

Стандартна връзкаизтеглени шрифтовеизглежда така

@font-face ( font-family: "Font_name_any"; src: url("Font_file_name.eot"); src: url("Font_file_name.eot? #iefix") format("embedded-opentype"), url("Font_file_name .woff") format("woff"), url("Font_file_name.ttf") format("truetype"), url("Font_file_name.svg#DSNoteRegular") format("svg"); тегло на шрифта: нормално; шрифт -стил: нормален)

В моя случай връзката ще изглежда така

/* Код за включване на шрифта в /css/style.css */ @font-face ( font-family: "RobotoRegular"; url("../fonts/RobotoRegular.ttf") format("truetype"); шрифт - стил: нормален; тегло на шрифта: нормален)

За да свържете избрания от вас шрифт със сайта, отидете в раздела ВГРАЖДАНЕ, там ще видите 2 метода на свързване:

1.СТАНДАРТ

Този кодтрябва да се добави към раздела вашия HTML документ.

2. @ВНОС

@import url("https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic");

важно. Независимо от метода на свързване, използвайте следните CSS правила, за да дефинирате тези семейства: font-family: ‘Roboto’, sans-serif; повече за това по-долу.

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

Добрата новина е, че можете да инсталирате всеки шрифт от библиотеката на Google на почти всеки WordPress темабез много караница. Как точно - ще ви научим днес.

Има два варианта - свържете плъгина или си поиграйте малко с файла functions.php.

Но първо бих искал да изброя предимствата и Недостатъците на GoogleШрифтове, за да можете най-накрая да решите дали да ги използвате в проектите си или не.

Добрите и лошите страни на Google Web Fonts

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

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

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

Сред недостатъците възможно е да се посочи, че Изборът на шрифтове на Google е малък , много от тях са подобни един на друг. Трябва да прекарате много време в търсене, за да намерите приличен, оригинален шрифт. Има много малко шрифтове за кирилица.

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

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

Ако търсите плъгини, първото нещо, което ще видите в резултатите от търсенето е Плъгини WP Google Fonts и Easy Google Web Fonts . Това са наистина два от най-добрите плъгини.

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

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

Easy Google Web Fonts оправдава името си и прави инсталирането на Google Fonts изключително лесно дори за начинаещи. Можете да използвате функцията Преглед на живоза преглед, тестване и оптимизиране на шрифтове, без да напускате уебсайта, и създаване на ваши собствени правила за шрифтове, без да пишете ред код.

Правилният начин за инсталиране на Google Fonts в WordPress шаблон

В крайна сметка стигаме до опцията да отворим файла functions.php и да си поиграем малко с кода. Преди да направите това, трябва да изберете шрифт от библиотеката на Google. За пример, нека се опитаме да вземем един много популярен Отворете Sans.

След това трябва да изберете стил на шрифта - нормален, получер или курсив. Можете да направите това сами :)

След като изберете стиловете, Google ще ви даде кодов фрагмент. Нашата изглежда така:

Освен това получихме CSS стила:

семейство шрифтове: "Open Sans", sans-serif;

Сега е време да отворите файла functions.php (път на файла: wp-content/themes/yourtheme). В края на файла добавете нова функция:

функция load_fonts()
{
wp_register_style("et-googleFonts",
"http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300"); wp_enqueue_style("et-googleFonts");
}
add_action("wp_print_styles", "load_fonts");

Ключът към тази функция е командата "wp_enqueue_style", която принуждава WordPress да извиква таблици със стилове на шрифтове в заглавката на всяка страница. Ако се вгледате внимателно, ще видите, че премахнахме връзката href= и rel='stylesheet' type'text/css' от кода, който Google ни предостави и ще трябва да направите същото, ако искате да добавите друг шрифт на Google за вашия WordPress сайт.

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

тяло
{
шрифт: нормален 1em "Open Sans", sans-serif;
цвят: #313131;
}

Този стил ще работи в целия сайт. ДО отделни фрагментитекст, можете да зададете различен стил:

Удебелен текст
{
шрифт: удебелен 1em "Open Sans", sans-serif;
}

Както можете да видите, всичко всъщност е много просто. Опитайте и вижте резултата :)

Да научите всичко сами не е лесно, но много интересно. Ако имате поне повърхностно разбиране за това как работи сайтът, тогава за да реализирате проекта си, е по-добре да го направите сами. В същото време не само ще спестите много пари, но и ще научите много „трикове“, тайни и т.н. Използването на шрифтове на Google обикновено не привлича вниманието, въпреки че благодарение на тях блогът може да стане много повече интересно.

Обслужване

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

За тази цел е специално разработен прост дизайн. Сега работата с Google Fonts стана по-лесна и броят на посетителите се увеличи. Разшири се и библиотеката. Миналата година услугата беше преработена, което събра много положителна обратна връзка. Сега е по-лесно за хората да свързват шрифтове към своите уебсайтове и да ги разглеждат.

Външен вид

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

Сега разработчиците са се фокусирали върху Material Design. Всичко е придобило изискани черти. Външен видстана „по-лесно“. Фината анимация и интерактивността станаха забележими. Няма нищо друго, което да ви отклони от избора на правилния шрифт на Google Fonts.

Има удобна адаптация на ресурса за мобилни устройства. Разбира се, такава промяна не е много забележима на фона на иновациите, но като се вземат предвид грешките предишна версияще се превърне в "манна небесна" за запалените потребители.

Възможност

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

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

Любими

Услугата за шрифтове на Google Fonts позволява на потребителите да използват любимите си опции. Специален раздел съдържа набор от стилове, които разработчикът препоръчва за използване. Тези колекции се отличават от останалите. Те са разработени от специалисти от Google и агенции на трети страни. Повечето от тях имат определен стил и специална философия.

Преглед

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

Имаше въпроси и за това допълнителни бутони, за които на пръв поглед се знаеше малко. Трябваше или да ги посочиш, или да ги използваш. Сега всичко стана повече или по-малко ясно. Появиха се допълнителни функции:

Изберете конкретно изречение, абзац или потребителски текстов елемент.
Експериментиране с теглото на шрифта.
Бързо коригирайте размерите с помощта на плъзгача.

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

Връзка

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

Ще разгледаме как да получите връзка за свързване на шрифтове на Google. Трябва да отидете на официалния уебсайт на Google Fonts. Там разглеждате каталог от стилове и избирате този, който ви подхожда най-добре. За да направите това, щракнете върху знака плюс до него. След това шрифтът ще бъде добавен към специален блок в най-долната част на страницата.

Кликнете върху този блок и след това го конфигурирайте. Тук можете да изберете стила и желаната азбука. Ако имате нужда от кирилизирани шрифтове на Google, проверете реда за кирилица. След това ще бъде генерирана връзка. Може да се намери в същия прозорец в раздела Вграждане. Просто трябва да го копирате или да го използвате пълен код HTML.

Обикновено в настройките на сайта има настройка за шрифтове и цветове. Има стандартни опции и можете да добавите разширени. Те съдържат отделна опция за Google Fonts. Ако след това трябва да изтеглите шрифтове чрез приставката Supreme Google Webfonts.

Намиране на уеб шрифтове на Google, които харесвате

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

След като щракнете върху този бутон, ще се озовете на нова страница. Превъртете, докато видите формуляр, наречен " Добавете този код към уебсайта си":

Копирайте кода и го поставете в бележника, ще го използваме по-късно. Обикновено се използват поне 2 различни шрифта. Например в нашата практика използвахме шрифтове Осуалд + Лора. Така че описаната по-горе процедура трябва да се повтори за втория шрифт.

Добавяне на уеб шрифтове на Google към тема на WordPress

Има три основни начина за добавяне на Google шрифтове към вашия уебсайт. Например, има стандартен път, методът за импортиране @импортиранеи добавяне с помощта Javascript. Обикновено се използва един от първите два метода.

Най-лесният начин е да отворите файла с вашата тема style.cssи поставете в него следния код, свързан с шрифта, който добавяте (не забравяйте, че го копирахме в Notepad в първата стъпка):

@import url(http://fonts.googleapis.com/css?family=Lora); @import url(http://fonts.googleapis.com/css?family=Oswald);

Много хора правят това ( СтудиоПрес, Битие). Но въпреки това това не е напълно правилен метод за добавяне на отворени шрифтове. Използване на метода @импортиранеблокира паралелните изтегляния, карайки уеб браузъра първо да завърши изтеглянето на файла с шрифтове, преди да продължи да изтегля останалата част от съдържанието на уебсайта ви. Следователно, въпреки че този метод изглежда удобен, той не е такъв най-добрият начинза работа с шрифтове, ако държите на скоростта и ефективността на вашия сайт. Можете да прочетете повече за тези нюанси тук.

Най-доброто нещо, което можете да направите, е да комбинирате заявки към различни Google Fonts в една молбаза да избегнете прекомерни HTTP заявки. Ето как да го направите. Добавете кода:

@import url(http://fonts.googleapis.com/css?family=Lora|Oswald);

Дори да сте принудени да използвате @импортиране, комбинирайте поне няколко заявки в една.

Как да добавите уеб шрифтове на Google, без да компрометирате производителността на сайта

Най-добрият начин би бил да използвате стандартен метод , който използва връзки, вместо да импортира файл. Просто вземете два адреса URL адресот първата стъпка на тази инструкция. Комбинирайте 2 различни шрифта, като добавите символ между тях | . След това поставете получения код в блок главатавашата тема. За да направите това, ще трябва да редактирате файла header.php и добавете кода от листа със стилове към него. Трябва да изглежда по следния начин:

Основна цел- това е да добавите заявка към шрифта на ранен етап. Според блога на проекта Google уеб шрифтовеако има таг на скрипт преди декларацията на шрифта @font-face, Тогава Internet Explorerнищо няма да се визуализира на страницата, докато не се зареди самият файл с шрифтове.

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

H1 (семейство шрифтове: "Oswald", Helvetica, Arial, serif; )

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

Например, ако погледнете страницата Чертеж, екипът създаде темата WPBv4 като персонализирана дъщерна тема от рамката Битие. Нека да видим как да добавим уеб шрифтове на Google към дъщерна тема въз основа на Битие.

Как да добавите уеб шрифтове на Google към дъщерна тема на Genesis

Отворете дъщерната тема и нейния файл functions.php и добавете следния код към този файл:

Add_action("genesis_meta", "wpb_add_google_fonts", 5); функция wpb_add_google_fonts() ( ехо " "; }

Основното нещо, което трябва да направите- това е да разгледате кода вътре в блока генезис_мета. По подразбиране има параметри като МЕТА- описания, ключови думи, листове със стилове, фавикони и др. Чрез посочване на приоритет 5 , ще се уверим, че листът със стилове е зареден преди основния лист със стилове.

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

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