Як дадаць карыстальніцкія шрыфты ў WordPress

Вы хочаце дадаць карыстальніцкія шрыфты ў WordPress? Карыстальніцкія шрыфты дазваляюць выкарыстоўваць прыгожую сумесь розных шрыфтоў на вашым сайце, каб палепшыць тыпаграфію і карыстацкі досвед. У дадатак да выдатнага выгляду, карыстальніцкія шрыфты таксама могуць дапамагчы вам палепшыць чытальнасць, стварыць брэндынг і павялічыць час, якое карыстальнікі праводзяць на вашым сайце. У гэтым артыкуле мы пакажам вам, як дадаць карыстальніцкія шрыфты ў WordPress з дапамогай метаду Google Fonts, TypeKit і CSS3 @Font-Face.

Заўвага: Загрузка занадта вялікай колькасці шрыфтоў можа запаволіць ваш вэб-сайт. Мы рэкамендуем вам выбраць два шрыфты і выкарыстоўваць іх на сваім сайце. Мы таксама пакажам вам, як правільна загрузіць іх, не запавольваючы працу вашага сайта. Перш чым мы разгледзім, як дадаць карыстальніцкія шрыфты ў WordPress, давайце паглядзім, як знайсці карыстальніцкія шрыфты, якія вы можаце выкарыстоўваць.

Як знайсці карыстальніцкія шрыфты для выкарыстання ў WordPress

Раней шрыфты былі дарагімі, але цяпер не. Ёсць шмат месцаў, дзе можна знайсці выдатныя бясплатныя вэб-шрыфты, у тым ліку Google Fonts, Typekit, FontSquirrel і fonts.com. Калі вы не ведаеце, як змешваць і спалучаць шрыфты, паспрабуйце Font Pair. Дапамажыце дызайнерам спалучаць прыгожыя шрыфты Google. Выбіраючы шрыфты, памятайце, што выкарыстанне занадта вялікай колькасці карыстальніцкіх шрыфтоў замарудзіць ваш вэб-сайт. Вось чаму вы павінны выбраць два шрыфты і выкарыстоўваць іх у сваім дызайне. Гэта таксама прынясе паслядоўнасць у ваш дызайн.

Відэаўрок

Падпісацца на MundoCMS Калі вам не падабаецца відэа ці вам больш падабаецца пісьмовае кіраўніцтва, чытайце далей.

Дадайце карыстальніцкія шрыфты ў WordPress з Google Fonts

Google Fonts з'яўляецца самай вялікай, бясплатнай і найбольш выкарыстоўванай бібліятэкай шрыфтоў распрацоўшчыкамі вэб-сайтаў. Ёсць некалькі спосабаў дадаць і выкарыстоўваць шрыфты Google у WordPress.

Спосаб 1: дадайце карыстальніцкія шрыфты з дапамогай убудовы Easy Fonts Plugin ад Google

Калі вы хочаце дадаць і выкарыстоўваць шрыфты Google на сваім сайце, гэты метад, безумоўна, самы просты і рэкамендаваны для пачаткоўцаў. Першае, што вам трэба зрабіць, гэта ўсталяваць і актываваць убудова Easy Google Fonts. Для атрымання больш падрабязнай інфармацыі азнаёмцеся з нашым пакрокавым кіраўніцтвам аб тым, як усталяваць убудова WordPress. Пасля актывацыі вы можаце атрымаць доступ Знешні выгляд » Настройшчык старонка. Гэта адкрые інтэрфейс налады жывой тэмы, дзе вы ўбачыце новы раздзел Тыпаграфіка.

Пры націску на Typography з'явяцца розныя раздзелы вашага сайта, дзе вы можаце прымяніць шрыфты Google. Проста націсніце «Змяніць шрыфт» у раздзеле, які вы хочаце змяніць.

У раздзеле Сямейства шрыфтоў вы можаце выбраць любы шрыфт Google, які хочаце выкарыстоўваць на сваім сайце. Вы таксама можаце выбраць стыль шрыфта, памер шрыфта, адступленне, поле і г.д. У залежнасці ад вашай тэмы колькасць раздзелаў тут можа быць абмежавана, і вы не зможаце наўпрост змяніць выбар шрыфта для многіх розных абласцей вашага сайта. Каб вырашыць гэтую праблему, убудова таксама дазваляе ствараць уласныя элементы кіравання і выкарыстоўваць іх для змены шрыфтоў на вашым сайце. Перш за ўсё вы павінны наведаць Налады » Google Fonts старонку і ўвядзіце назву для вашай паліцэйскай праверкі. Выкарыстоўвайце што-небудзь, каб дапамагчы вам хутка зразумець, дзе вы збіраецеся выкарыстоўваць гэты паліцэйскі кантрольна-прапускны пункт.

Далей націсніце кнопку «Стварыць кантроль зыходнага кода», і вам будзе прапанавана ўвесці селектары CSS. Вы можаце дадаць любы элемент HTML, на які вы хочаце нацэліць (напрыклад, h1, h2, p, blockquote) або выкарыстоўваць класы CSS. Вы можаце выкарыстоўваць інструмент Inspect у вашым браўзеры, каб даведацца, якія класы CSS выкарыстоўваюцца ў канкрэтнай вобласці, якую вы хочаце змяніць.

Цяпер націсніце на кнопку «Захаваць кантроль крыніц», каб захаваць налады. Вы можаце стварыць столькі кантролераў шрыфтоў, колькі вам трэба для розных раздзелаў вашага сайта. Каб выкарыстоўваць гэтыя драйверы шрыфтоў, перайдзіце на старонку Знешні выгляд » Настройшчык і націсніце ўкладку Тыпаграфія. У раздзеле «Тыпаграфія» вы ўбачыце опцыю «Тэмаграфія». Пстрыкніце яго, каб паказаць карыстальніцкія элементы кіравання шрыфтамі, якія вы стварылі раней. Цяпер вы можаце проста націснуць кнопку «Рэдагаваць», каб выбраць шрыфты і знешні выгляд гэтага элемента кіравання.

Не забудзьце націснуць кнопку Захаваць або Апублікаваць, каб захаваць змены.

Спосаб 2 - Дадаць шрыфты Google уручную ў WordPress

Гэты метад патрабуе ад вас дадаць код у файлы тэмы WordPress. Калі вы не рабілі гэтага раней, азнаёмцеся з нашым кіраўніцтвам аб тым, як скапіяваць і ўставіць код у WordPress. Спачатку наведайце бібліятэку шрыфтоў Google і абярыце шрыфт, які вы хочаце выкарыстоўваць. Затым націсніце на кнопку хуткага выкарыстання пад крыніцай.

На старонцы Шрыфты вы ўбачыце даступныя стылі для гэтага шрыфта. Выберыце стылі, якія вы хочаце выкарыстоўваць у сваім праекце, затым націсніце кнопку на бакавой панэлі ўверсе.

Затым вам трэба будзе пераключыцца на ўкладку «Уставіць» на бакавой панэлі, каб скапіяваць код для ўбудавання. Ёсць два спосабу дадаць гэты код на ваш сайт WordPress. Па-першае, вы можаце адрэдагаваць файл header.php вашай тэмы і ўставіць код перад тэгам. Аднак, калі вы не знаёмыя з рэдагаваннем кода ў WordPress, вы можаце выкарыстоўваць убудова, каб дадаць гэты код. Проста ўсталюеце і актывуйце убудову Уставіць верхнія і ніжнія калонтытулы. Для атрымання больш падрабязнай інфармацыі азнаёмцеся з нашым пакрокавым кіраўніцтвам аб тым, як усталяваць убудова WordPress. Падчас актывацыі перайдзіце ў Налады »Уставіць верхнія і ніжнія калонтытулы старонку і ўстаўце код устаўкі ў поле «Скрыпты ў загалоўку».

Не забудзьцеся націснуць кнопку Захаваць, каб захаваць змены. Цяпер убудова пачне загружаць код для ўбудавання Google Fonts на ўсе старонкі вашага сайта. Вы можаце выкарыстоўваць гэты шрыфт у табліцы стыляў вашай тэмы наступным чынам: .h1 site-title {font-family: 'Open Sans', Arial, sans-serif; } Каб атрымаць больш падрабязныя інструкцыі, азнаёмцеся з нашым кіраўніцтвам аб тым, як дадаць шрыфты Google у тэмы WordPress.

Дадайце карыстальніцкія шрыфты ў WordPress з дапамогай Typekit

Typekit ад Adobe Fonts - гэта яшчэ адзін бясплатны і прэміум-рэсурс для дзіўных шрыфтоў, якія вы можаце выкарыстоўваць у сваіх дызайнерскіх праектах. У іх ёсць платная падпіска і абмежаваны бясплатны план, які вы можаце выкарыстоўваць. Проста стварыце ўліковы запіс Adobe Fonts і наведайце раздзел Агляд шрыфтоў. Адтуль вы павінны націснуць на яго, каб выбраць крыніцу і стварыць праект.

Затым вы ўбачыце код для ўбудавання з ідэнтыфікатарам вашага праекта. Ён таксама пакажа вам, як выкарыстоўваць шрыфт у CSS вашай тэмы. Вы павінны скапіяваць і ўставіць гэты код у раздзел вашага сайта.

Ёсць два спосабу дадаць гэты код на ваш сайт WordPress. Па-першае, вы можаце адрэдагаваць файл header.php вашай тэмы і ўставіць код перад тэгам. Аднак, калі вы не знаёмыя з рэдагаваннем кода ў WordPress, вы можаце выкарыстоўваць убудова, каб дадаць гэты код. Проста ўсталюеце і актывуйце убудову Уставіць верхнія і ніжнія калонтытулы. Падчас актывацыі перайдзіце ў Налады »Уставіць верхнія і ніжнія калонтытулы і ўстаўце код устаўкі ў поле «Скрыпты ў загалоўку».

Вось і ўсё, цяпер вы можаце выкарыстоўваць шрыфт Typekit, які вы выбралі ў табліцы стыляў вашай тэмы WordPress, напрыклад: h1 .site-title {шрыфт-сем'я: gilbert, sans-serif; } Каб атрымаць больш падрабязныя інструкцыі, азнаёмцеся з нашым падручнікам, як дадаць дзіўную тыпаграфію ў WordPress з дапамогай Typekit.

Даданне карыстальніцкіх шрыфтоў у WordPress з дапамогай CSS3 @font-face

Самы прамы спосаб дадаць карыстальніцкія шрыфты ў WordPress - гэта дадаць шрыфты з дапамогай метаду CSS3 @font-face. Гэты метад дазваляе выкарыстоўваць любы шрыфт на вашым сайце. Першае, што вам трэба зрабіць, гэта загрузіць патрэбны шрыфт у вэб-фармаце. Калі ў вас няма вэб-фармату для вашага шрыфта, вы можаце канвертаваць яго з дапамогай генератара вэб-шрыфтоў FontSquirrel. Пасля таго, як у вас ёсць файлы вэб-шрыфтоў, вам трэба загрузіць іх на свой хостынг-сервер WordPress. Найлепшае месца для загрузкі шрыфтоў знаходзіцца ў новай тэчцы "шрыфты" у тэме або каталогу даччынай тэмы. Вы можаце выкарыстоўваць FTP або файлавы менеджэр cPanel, каб загрузіць шрыфт. Пасля таго, як вы загрузілі шрыфт, вам трэба загрузіць шрыфт у табліцу стыляў вашай тэмы, выкарыстоўваючы правіла CSS3 @font-face, напрыклад: @font-face {шрыфт-сем'я: Arvo; src: URL (http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf); вага шрыфта: нармальны; } Не забудзьце замяніць сямейства шрыфтоў і URL на ўласныя. Пасля гэтага вы можаце выкарыстоўваць гэты шрыфт у любым месцы ў табліцы стыляў вашай тэмы: .h1 site-title {шрыфт-сем'я: "Arvo", Arial, sans-serif; } Загрузка шрыфтоў непасрэдна з дапамогай CSS3 @font-face не заўсёды з'яўляецца лепшым рашэннем. Калі вы выкарыстоўваеце шрыфт з Google Fonts або Typekit, лепш за ўсё выкарыстоўваць шрыфт непасрэдна са свайго сервера для лепшай прадукцыйнасці. Вось і ўсё, мы спадзяемся, што гэты артыкул дапамог вам дадаць карыстальніцкія шрыфты ў WordPress. Вы таксама можаце звярнуцца да нашага кіраўніцтва па выкарыстанні шрыфтоў значкоў у WordPress і як змяніць памер шрыфта ў WordPress. Калі вам спадабаўся гэты артыкул, падпішыцеся на наш канал YouTube для відэа-ўрокаў WordPress. Вы таксама можаце знайсці нас у Twitter і Facebook.

Першапачаткова апублікавана 2021 02:23:20.