WordPress-də xüsusi şriftləri necə əlavə etmək olar

Xüsusi WordPress şriftlərini əlavə etmək istəyirsiniz? Xüsusi şriftlər mətbəə və istifadəçi təcrübəsini artırmaq üçün veb saytınızdakı müxtəlif şriftlərin gözəl birləşməsini istifadə etməyə imkan verir.

Yaxşı görünməklə yanaşı, xüsusi şriftlər də oxunuşu yaxşılaşdırmağa, marka imicini yaratmağa və istifadəçilərin veb saytınıza sərf etdiyi vaxtı artırmağa kömək edə bilər.

Bu yazıda, Google Fonts, TypeKit və CSS3 @ Font-Face metodundan istifadə edərək WordPress-də xüsusi şriftlərin necə əlavə olunacağını sizə göstərəcəyik.

WordPress-də xüsusi şriftlər əlavə edin

Qeyd: Çox şriftlərin yüklənməsi veb saytınızı yavaşlatır. İki şrift seçməyi və veb saytınızda istifadə etməyi məsləhət görürük. Veb saytınızı yavaşlatmadan necə düzgün yüklədiyinizi də sizə göstərəcəyik.

WordPress-də xüsusi şriftləri necə əlavə edəcəyimizi görməzdən əvvəl istifadə edə biləcəyiniz xüsusi şriftləri tapmaq üçün bir nəzər salaq.

WordPress-də istifadə ediləcək xüsusi şriftləri necə tapmaq olar

Fəvvarələr bahalı olurdu, amma artıq deyil. Google Fonts, Typekit, FontSquirrel və fonts.com kimi böyük pulsuz veb şriftləri tapmaq üçün bir çox yer var.

Şriftləri necə qarışdırmaq və uyğunlaşdırmağı bilmirsinizsə, Font Pair cəhd edin. Dizaynerlərə gözəl Google şriftlərini birləşdirməyə kömək edin.

Şriftlərinizi seçərkən, çox xüsusi şriftlərdən istifadə veb saytınızı yavaşlatacağını unutmayın. Buna görə iki şrift seçib dizayn boyunca istifadə etməlisiniz. Bu da dizaynınıza uyğunluq gətirəcəkdir.

Video Təlimatı

WPBeginner-ə abunə olun

Videonu bəyənmirsinizsə və ya yazılı bələdçiyə üstünlük verirsinizsə, oxumağa davam edin.

Google şriftlərindən xüsusi WordPress şriftlərini əlavə edin

Google Fonts Preview

Google Fonts veb sayt tərtibatçıları arasında ən böyük, pulsuz və ən çox istifadə olunan yazı kitabxanasıdır. WordPress-də Google şriftlərini əlavə etmək və istifadə etmək üçün bir neçə yol var.

Metod 1: Google Easy Fonts plugin ilə xüsusi şriftlər əlavə edin

Veb saytınıza Google Şriftləri əlavə etmək və istifadə etmək istəyirsinizsə, bu üsul ən asan və başlayanlar üçün tövsiyə olunur.

Etdiyiniz ilk şey Easy Google Fonts plaginini quraşdırmaq və aktivləşdirməkdir. Daha çox məlumat üçün, WordPress plaginini necə quraşdıracağımızı addım-addım təlimatımıza baxın.

Aktivləşdirildikdən sonra gedə bilərsiniz Görünüş »Customizer səhifə. Bu, yeni Typoqrafiya bölməsini görəcəyiniz canlı tema tənzimləyici interfeysini açacaqdır.

Customizer Typography

Tipoqrafiyanı tıklayarak veb saytınızın Google şriftlərini tətbiq edə biləcəyiniz müxtəlif bölmələrini görəcəksiniz. Redaktə etmək istədiyiniz hissənin altındakı "Mənbə Düzəliş et" düyməsini basın.

Tipoqrafiya parametrləri

Şrift ailəsi bölməsində veb saytınızda istifadə etmək istədiyiniz hər hansı bir Google şriftini seçə bilərsiniz. Ayrıca şrift tərzini, şrift ölçüsünü, doldurma, margin və daha çoxunu seçə bilərsiniz.

Mövzunuzdan asılı olaraq, burada bölmələrin sayı məhdud ola bilər və veb saytınızın bir çox müxtəlif sahələri üçün yazı seçimini birbaşa dəyişdirə bilməyəcəksiniz.

Bunu düzəltmək üçün plugin, özünüzdə idarəetmə vasitələri yaratmağa və veb saytdakı şriftləri dəyişdirmək üçün istifadə etməyə imkan verir.

Əvvəlcə ziyarət etməlisiniz Parametrlər »Google Şriftləri səhifə və font nəzarət üçün bir ad təmin edin. Bu mənbə nəzarətini harada istifadə edəcəyinizi tez başa düşməyiniz üçün bir şey istifadə edin.

Mənbə nəzarət bölməsi

Sonra, "Şrift İdarəetmə Yarat" düyməsini vurun və sonra CSS seçicilərinə girməyiniz xahiş olunur.

Hədəfləndirmək istədiyiniz HTML elementlərini (məsələn, h1, h2, p, bloknot) və ya CSS dərslərindən istifadə edə bilərsiniz.

CSS-in dəyişdirilməsini istədiyiniz xüsusi sahənin nə olduğunu öyrənmək üçün brauzerinizdəki Təftiş alətindən istifadə edə bilərsiniz.

CSS seçiciləri əlavə edin

İndi parametrlərinizi saxlamaq üçün "Mənbə idarəsini saxla" düyməsini vurun. Veb saytınızın müxtəlif bölmələri üçün ehtiyac duyduğunuz qədər şrift sürücülərini yarada bilərsiniz.

Bu şrift sürücülərindən istifadə etmək üçün getməlisiniz Görünüş »Customizer və Typography sekmesini vurun.

Tipoqrafiya altında indi "Tematik tipoqrafiya" seçimini də görəcəksiniz. Bunun üzərinə tıklayarak əvvəllər yaratdığınız xüsusi şrift nəzarətlərini göstərəcəksiniz. İndi bu idarəetmə şriftlərini və görünüşünü seçmək üçün redaktə düyməsini vura bilərsiniz.

Tematik tipoqrafiya seçimi

Dəyişikliklərinizi saxlamaq üçün saxlama və ya yayım düyməsini vurmağı unutmayın.

Metod 2: Google şriftlərini WordPress-də əl ilə əlavə edin

Bu üsul, WordPress tema sənədlərinizə kod əlavə etməyinizi tələb edir. Daha əvvəl bunu etməmisinizsə, WordPress-də kodu necə surətləndirmək və yapışdırmaq barədə təlimatımızı nəzərdən keçirin.

Əvvəlcə Google yazı kitabxanasına baş çəkin və istifadə etmək istədiyiniz şrifti seçin. Sonra şriftin altındakı sürətli istifadə düyməsini vurun.

Istifadə etmək istədiyiniz yazı üslublarını seçin

Şriftlər səhifəsində həmin şrift üçün mövcud üslubları görəcəksiniz. Layihənizdə istifadə etmək istədiyiniz üslubları seçin və sonra üst tərəfdəki düyməni vurun.

Şrifti yerləşdirmək üçün linki əldə edin

Bundan sonra, embar kodunu kopyalamaq üçün yan çubuğundakı "Embed" sekmesine keçməlisiniz.

Bu kodu WordPress saytınıza əlavə etməyin iki yolu var.

Birincisi, sadəcə mövzu başlığının header.php faylını düzəldə bilərsiniz və kodu əvvəllər yapışdıra bilərsiniz

etiket.

Bununla yanaşı, WordPress-də redaktə kodu ilə tanış deyilsinizsə, bu kodu əlavə etmək üçün bir plugin istifadə edə bilərsiniz.

Sadəcə daxiletmə başlıqları və altbilgi plaginini quraşdırın və aktivləşdirin. Daha çox məlumat üçün, WordPress plaginini necə quraşdıracağımızı addım-addım təlimatımıza baxın.

Aktivləşdirildikdən sonra gedin Parametrlər »Başlıqlar və altbilgilər daxil edin səhifəni daxil edin və daxil edilmiş kodu "Skriptlər başlıqda" qutusuna yapışdırın.

WordPress saytınıza mənbə kodu əlavə edin

Dəyişikliklərinizi saxlamaq üçün Saxla düyməsini vurmağı unutmayın. Plugin, veb saytınızın hər səhifəsində Google Font kodunu yükləməyə başlayacaq.

Bu şrifti temanın tərz cədvəlində bu kimi istifadə edə bilərsiniz:

.h1 site-title { 
 font-family: 'Open Sans', Arial, sans-serif; 
 }
 

Daha ətraflı təlimatlar üçün, Google şriftlərini WordPress mövzularına necə əlavə etmək barədə təlimatımıza baxın.

Typekit istifadə edərək xüsusi WordPress şriftlər əlavə edin

Typekit Adobe Şriftləri

Adobe Fonts Typekit, dizayn layihələrinizdə istifadə edə biləcəyiniz zəhmli şriftlər üçün başqa bir pulsuz və mükafat mənbəyidir. Onların pullu bir abunəsi, həmçinin istifadə edə biləcəyiniz məhdud bir pulsuz planı var.

Sadəcə bir Adobe Fonts hesabına qeydiyyatdan keçin və şrift axtarış bölməsinə baş çəkin. Buradan mənbəyi seçmək və bir layihə yaratmaq üçün düyməni vurmalısınız.

Bir layihəyə typekit şrift əlavə edin

Sonra, layihə şəxsiyyət kodunuzla əlaqədar kodu görəcəksiniz. Ayrıca mövzunun CSS-də şriftdən necə istifadə edəcəyinizi göstərəcəkdir.

Bu kodu kopyalamalı və içərisinə yapışdırmalısınız

veb saytının bölməsi.

Yazma şrift daxil etmə kodu

Bu kodu WordPress saytınıza əlavə etməyin iki yolu var.

Birincisi, sadəcə mövzu başlığının header.php faylını düzəldə bilərsiniz və kodu əvvəllər yapışdıra bilərsiniz

etiket.

Bununla yanaşı, WordPress-də redaktə kodu ilə tanış deyilsinizsə, bu kodu əlavə etmək üçün bir plugin istifadə edə bilərsiniz.

Sadəcə daxiletmə başlıqları və altbilgi plaginini quraşdırın və aktivləşdirin.

Aktivləşdirildikdən sonra gedin Parametrlər »Başlıqlar və altbilgilər daxil edin səhifəni daxil edin və daxil edilmiş kodu "Skriptlər başlıqda" qutusuna yapışdırın.

WordPress-də Adobe Fonts Typekit əlavə edin

Budur, indi WordPress tema stilində seçdiyiniz Typekit şriftini bu kimi istifadə edə bilərsiniz:

h1 .site-title { 
 font-family: gilbert, sans-serif;
 } 
 

Daha ətraflı təlimatlar üçün Typekit istifadə edərək WordPress-də gözəl şriftin necə əlavə olunması barədə təlimimizə baxın.

CSS3 @ font-face istifadə edərək xüsusi WordPress şriftlər əlavə edin

WordPress-də xüsusi şriftlər əlavə etməyin ən birbaşa yolu CSS3 @ font-face metodundan istifadə edərək şriftlər əlavə etməkdir. Bu üsul veb saytınızda istədiyiniz hər hansı bir şriftdən istifadə etməyə imkan verir.

Ediləcək ilk şey, istədiyiniz şrifti veb formatında yükləməkdir. Şriftiniz üçün veb formatınız yoxdursa, FontSquirrel Webfont generatorunu istifadə edərək çevirə bilərsiniz.

Veb şrift faylları olduqdan sonra onları WordPress hosting serverinizə yükləməlisiniz.

Şriftləri yükləmək üçün ən yaxşı yer mövzu və ya uşaq teması qovluğunda yeni bir "şriftlər" qovluğunun içindədir.

Şrifti yükləmək üçün cPanel-dən FTP və ya Fayl menecerindən istifadə edə bilərsiniz.

Şrifti yüklədikdən sonra, CSS3 @ font-face qaydasını istifadə edərək şrifti temanın tərz cədvəlinə yükləməlisiniz:

@font-face {
 	font-family: Arvo;  
 	src: url(https://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);  
 	font-weight: normal;  
 }
 

Şrift ailəsini və URL-ni özünüzlə əvəz etməyi unutmayın.

Bundan sonra, bu şrifti mövzu tərz cədvəlinizin hər hansı bir yerində istifadə edə bilərsiniz:

.h1 site-title { 
 font-family: "Arvo", Arial, sans-serif; 
 }
 

Birbaşa CSS3 @ font-face istifadə edərək şriftlərin yüklənməsi həmişə ən yaxşı həll yolu deyildir. Bir Google Fonts və ya Typekit şriftindən istifadə edirsinizsə, o zaman optimal işləmə üçün şriftinizi birbaşa serverinizdən istifadə etmək yaxşıdır.

Budur, ümid edirik ki, bu məqalə xüsusi WordPress şriftlərini əlavə etməyə kömək etdi. Ayrıca WordPress-də simge şriftlərindən necə istifadə edəcəyinizi və WordPress-də şrift ölçüsünü necə dəyişdirəcəyinizi öyrənə bilərsiniz.

Bu yazını bəyənmisinizsə, kanalımıza abunə olun YouTube WordPress tutorial video izləmək üçün. Bizi də tapa bilərsiniz Twitter y Facebook.