Habka ugu wanaagsan ee loogu daro qaar ka mid ah sumadeynta iyo shaqsinimada boggaaga WordPress^(WordPress) waa inaad bedesho xarfaha mawduucaaga.

Qoraallada qoraalka iyo walxaha kale ee isku xidhka ah waxay abuuraan aragti hore oo wanaagsan, deji niyadda soo-booqdayaasha boggaaga, oo deji aqoonsiga summadaada. Daraasaduhu^(Studies) waxay sidoo kale ogaadeen in xarfaha ay saameeyaan awoodda akhristayaasha si ay u bartaan, u xasuustaan ​​​​ macluumaadka, iyo xafididda qoraallada.

Haddii aad hadda rakibtay mawduuc WordPress ah^{(installed a WordPress theme)} ama aad leedahay xoogaa CSS ah iyo khibrad kood, waxaanu ku tusi doonaa dhawr ikhtiyaar oo aad u isticmaali karto inaad ku beddesho xarfaha WordPress .

Sida loo Bedelo Fonts gudaha WordPress^{(How to Change Fonts in WordPress)}

Waxaa jira saddex ikhtiyaar oo waaweyn oo kuu diyaar ah inaad ku beddesho xarfaha WordPress:

• Isticmaal xarfaha shabakadda sida Google Fonts , Fonts.com , ama Adobe Edge Fonts Web^{( Adobe Edge Web Fonts)} , kuwaas oo lagu martigeliyo goob dhinac saddexaad ah.
• Ku qor xarfaha^(Code) shabakada mawduucaaga oo saf
• Ku marti^(Host) geli xarfaha boggaaga oo ku dar mawduucaaga

1. Sida loo beddelo farta WordPress-ka iyadoo la isticmaalayo farta shabakadda^{(1. How to Change Fonts in WordPress Using Web Fonts)}

Isticmaalka xarfaha webka waa hab sahlan oo degdeg ah oo lagu beddelo xarfaha WordPress halkii la soo dejin lahaa oo la soo gelin lahaa faylasha font.

Doorashadan, waxaad geli kartaa noocyo kala duwan oo xarfo ah^{(access a variety of fonts)} adigoon cusboonaysiin iyaga mar kasta oo isbeddel yimaado, mana soo jiidato booska server-ka ee martigelintaada. Farta waxaa si toos ah looga helaa adeegaha adeeg bixiyaha iyadoo la isticmaalayo plugin ama iyadoo kood lagu daro goobtaada.

Hubi^(Make) in xarfaha shabakada ee aad u dooratay goobtaada ay ku habboon yihiin astaantaada, ay fududahay in lagu akhriyo qoraalka jidhka, yaqaanaan booqdayaasha mareegaha, oo ay gudbiyaan nooca niyadda iyo sawirka aad rabto.

Waxaad ku dari kartaa xarfaha shabakada adoo isticmaalaya plugin WordPress ah^{(using a WordPress plugin)} ama gacanta adoo ku daraya dhowr sadar oo kood ah goobtaada. Aynu baadhno labada doorasho.

Sida loogu daro Fonts-ka Webka iyadoo la adeegsanayo Plugin WordPress ah^{(How to Add Web Fonts Using a WordPress Plugin)}

Iyada oo ku xidhan farta shabakadda ee aad dooratay, waxaad isticmaali kartaa plugin WordPress ah si aad u gasho maktabadda xarfaha oo aad ka doorato midka aad ka rabto goobtaada. Hagahan, waxaan dooranay Fonts Google^{(Google Fonts)} oo aan isticmaalnay plugin-ka qoraalka qoraalka Google^{(Google Fonts Typography)} .

1. Si aad u bilowdo, gal dashboardkaaga maamulka WordPress , oo dooro ^(WordPress)Plugins > Add New .

1. Ku qor qoraalka Google Fonts^{(Google Fonts Typography)} sanduuqa raadinta, oo dooro Hadda Ku rakib^{(Install Now)} .

1. Dooro Dhaqdhaqaaq^(Activate) .

1. Marka xigta, gal Customizer^(Customizer) -ka adiga oo aadaya Appearance > Customize .

1. Dooro qaybta Google Fonts^{(Google Fonts)}

1. Marka xigta, dhagsii isku xirka si aad u furto Settings' fonts oo u habayso sida soo socota:

• Hoosta Dejinta Aasaasiga ah^{(Basic Settings)} , u deji farta caadiga ah ee qoraalka jirkaaga, cinwaannada, iyo badhamada.

• Hoosta Settings Advanced^{(Advanced Settings)} , habayso cinwaankaaga iyo sharaxaadda goobtaada, menu-ka, ciwaanada iyo waxa ku jira, bar-side, iyo footer.

• Ka saar^(Uncheck) wax kasta oo miisaanka farta ah ee aan la rabin qaybta Soodejinta^{(Font Loading)} farta si aad uga fogaato hoos u dhigista goobtaada^{(avoid slowing down your site)} .

Haddii ay jiraan xarfaha goobtaada oo aan soo bandhigin ama si sax ah u shaqaynayn, isticmaal qaybta wax ka saarida^{(Debugging )} si aad u xalliso.

1. Waxaad ku tijaabin kartaa goobahan Customizer si aad u hubiso inay u shaqaynayaan sidaad rabto, ka dibna dooro Daabac^(Publish) .

Xusuusin^(Note) : Haddii aad ilowdo inaad doorato daabacaadda Customizer -ka , waxaad waayi doontaa dhammaan isbeddellada aad samaysay.

Sida loogu daro Fonts-ka Shabakadda iyadoo la adeegsanayo Koodhka^{(How to Add Web Fonts Using Code)}

Waxaad ku rakibi kartaa oo isticmaali kartaa xarfaha shabakada haddii aad marin u leedahay koodka mawduucaaga. Kani waa hab beddelka buug-gacmeedka oo lagu daro plugin dheeraad ah, laakiin maaha wax adag haddii aad si taxadar leh u raacdo tillaabooyinka.

Si kastaba ha ahaatee, waxaa jira tillaabooyin kala duwan oo la qaado haddii aad isticmaalayso mawduuc ka socda hagaha mawduuca WordPress ama mawduuc la habeeyey.

Haddii aad mawduuc ka soo iibsatay hagaha mawduuca WordPress , samee mawduuca ilmaha^{(create a child theme)} ka dibna sii style.css iyo function.php faylka. Way sahlan tahay haddii aad leedahay mawduuc la habeeyey maadaama aad wax ka beddeli karto qaabka xaashida iyo faylka hawlaha mawduucaaga.

1. Si aad u bilowdo, ka dooro far maktabadda Google Fonts , oo dooro summada ^{(Google Fonts)}+ (plus) si aad ugu darto maktabadaada.

1. Marka xigta, dooro tabka hoose ee aad ka heli doonto koodka aad ku dari karto goobtaada. Tag qaybta farta Embed^{(Embed font)} ee hoos timaada tabka Embed . Waxaad ka heli doontaa koodka uu sameeyay Google Fonts , kaas oo u eg sidan:

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

Fiiro gaar^(Note) ah: Waxaan u dooranay Hagahan Work Sans si magaca fartu uu ka duwanaado kaaga iyadoo ku xidhan waxaad dooratay.

1. Nuqul ka samee qaybtan summada: https://fonts.googleapis.com/css2?family=Work+Sans

Tani waxay kuu ogolaaneysaa inaad ka soo gasho qaabka Google Fonts server si aad uga hortagto isku dhaca plugins qolo saddexaad. Waxa kale oo ay ogolaataa in si sahlan wax looga beddelo mawduuca ilmaha.

1. Si aad u safto font, fur faylka hawlaha oo ku dar koodka soo socda. ( Ku baddal^(Replace) isku xirka xiriirka aad ka hesho Google Fonts ):

shaqada wosib_add_google_fonts() { ^{(function wosib_add_google_fonts() {)}
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);

wp_enqueue_style ('googleFonts');
}

add_action ('wp_enqueue_scripts', 'mybh_add_google_fonts');

1. Waxaad ku dari kartaa xariiq cusub shaqadaada ama isla sadar haddii aad rabto inaad mustaqbalka ku darto xarfo badan sida soo socota:

function mybh_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);

wp_enqueue_style ('googleFonts');
}

add_action ('wp_enqueue_scripts', 'mybh_add_google_fonts');

Xaaladdan oo kale, waxaanu safnay labada xarfo ee Cambria iyo Work Sans .

Talaabada xigta waa in lagu daro xarfaha xaashida qaabka mawduucaaga si fartu uga shaqeyso goobtaada.

1. Si tan loo sameeyo, fur feylka mawduucaaga style.css oo ku dar koodhka si aad u qaabayso walxaha shakhsi ahaaneed ee xarfaha shabakadaada sida soo socota:

jirka { ^{(body {)}
font-qoyska: 'Shaqo Sans', sans-serif; ^{(font-family: ‘Work Sans’, sans-serif; )}
}

h1, h2, h3 {
qoyska font: 'Cambria', serif; ^{(font-family: ‘Cambria’, serif;)}
}

Xaaladdan oo kale, farta ugu weyn waxay noqon doontaa Work Sans halka qaybaha madax sida h1, h2, iyo h3 ay isticmaali doonaan Cambria .

Marka la sameeyo, keydi xaashida qaabka oo hubi in xarfahaagu ay u shaqeynayaan sidii la rabay. Haddii kale, hubi in xarfaha aan lagu xad-gudbin qaabka xaashida, ama ka nadiifi khasnad browserka oo isku day mar kale.

1. Hayso far kayd ah si aad u hubiso in xarfaha la samayn karo ama si sahal ah loo heli karo gaar ahaan isticmaalayaasha aaladaha hore, xidhiidhada xun, ama haddii bixiyaha fartu uu leeyahay arimo farsamo. Si tan loo sameeyo, aad xaashida qaabka oo tafatir CSS si aad u akhrido sida soo socota:

jirka { ^{(body {)}
font-qoyska: 'Shaqo Sans', Arial, sans-serif; ^{(font-family: ‘Work Sans’, Arial, sans-serif;)}
}

h1, h2, h3 {
qoyska font-qoyska: 'Cambria', Times New Roman, serif; ^{(font-family: ‘Cambria’, Times New Roman, serif;)}
}

Haddii wax walba ay wanaagsan yihiin, booqdayaasha boggaga ayaa arki doona xarfaha shabakadaada caadiga ah, xaaladeena Work Sans iyo Cambria . Haddii ay jiraan arrimo, waxay arki doonaan xarfaha kaydka ah, tusaale ahaan Arial ama Times New Roman kiiskeena.

2. Sida loo beddelo farta ku jirta WordPress iyadoo la adeegsanayo Hosting Fonts^{(2. How to Change Fonts in WordPress by Hosting Fonts)}

Ku martigelinta xarfaha ee server-yadaada waxay kaa caawineysaa inaad sare u qaaddo waxqabadka xarfaha shabakadaada, laakiin sidoo kale waa hab aad u ammaan badan oo aad u^{(a more secure way)} sameyso halkii aad ka soo jiidan lahayd ilaha boggaga dhinac saddexaad.

Google Fonts iyo xarfaha kale ee shabakada waxay kuu oggolaanayaan inaad soo dejiso xarfaha si aad u isticmaasho sida xarfaha gudaha lagu martigaliyo, laakiin wali waxaad ku soo dejisan kartaa xarfaha kale kombayutarkaaga waase shatiga kuu ogolaanaya inaad sidaas samayso.

1. Si aad u bilowdo, soo dejiso, fur, soo rar faylka font goobtaada ka dibna ku xidh xaashida qaabkaaga. Xaaladdan oo kale uma baahnid inaad xarfaha ku qorto faylka functional.php sida aad ku samaysay xarfaha shabakadda. Xaqiiji in faylasha aad soo dejinayso ay yihiin qaab .woff ka hor intaadan isticmaalin mareegahaaga.

1. Marka xigta, u gudub wp-content/themes/themename si aad faylka font ugu dhejiso mawduucaaga. 
2. Fur qaabka xaashida oo ku dar koodka soo socda (kiiskan waxaan isticmaaleynaa font Work Sans laakiin taas waxaad ku bedeli kartaa farahaaga):

@font-face {
font-qoyska: 'Shaqo Sans'; ^{(font-family: ‘Work Sans’;)}
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
font-miisaanka: caadi; ^{( font-weight: normal;)}
font-style: caadi; ^{( font-style: normal;)}
}

@font-face {
font-qoyska: 'Shaqo Sans'; ^{( font-family: ‘Work Sans’;)}
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
font-miisaanka: geesinimo; ^{( font-weight: bold;)}
font-style: caadi; ^{(font-style: normal;)}
}

@font-face {
font-qoyska: 'Cambria'; ^{(font-family: ‘Cambria’;)}
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
font-miisaanka: caadi; ^{( font-weight: normal;)}
font-style: caadi; ^{( font-style: normal;)}
}

Fiiro gaar^(Note) ah: Isticmaalka @fontface wuxuu kuu ogolaanayaa inaad isticmaasho farta geesinimada leh, farta farta iyo noocyada kale ee fartaada, ka dib waxaad qeexi kartaa miisaanka ama qaabka far kasta.

1. Marka xigta, ku dar qaabaynta walxahaaga sida soo socota:

jirka { ^{(body {)}
font-qoyska: 'Shaqo Sans', Arial, sans-serif; ^{(font-family: ‘Work Sans’, Arial, sans-serif;)}
src: url( “/fonts/Work Sans-Medium.ttf” );
}

h1, h2, h3 {
qoyska font-qoyska: 'Cambria', Times New Roman, serif; ^{(font-family: ‘Cambria’, Times New Roman, serif;)}
}

Habbee qoraalkaaga WordPress^{(Customize Your WordPress Typography)}

Beddelka xarfaha WordPress waa fikrad aad u fiican si loo horumariyo sumcadda iyo khibradda isticmaale. Ma aha hawl toos ah, laakiin waxaad yeelan doontaa koontarool dheeraad ah mawduucaaga.

Ma^(Were) awooday in aad habayso xarfaha boggaga adiga oo isticmaalaya tillaabooyinka addoo isticmaalaya talooyinka hagahan? Noo sheeg^(Tell) faallooyinka.

How to Change Fonts in WordPress

A greаt way to add some branding and individualism to your WordPress site is to change the fonts in your theme.

Typography and other banding elements create a good first impression, set the mood for your site’s visitors, and establish your brand’s identity. Studies have also found that fonts affect readers’ ability to learn, recall information, and memorize texts.

If you just installed a WordPress theme or have some CSS and coding experience, we’ll show you several options you can use to change fonts in WordPress.

How to Change Fonts in WordPress

There are three main options available for you to change fonts in WordPress:

• Use web fonts like Google Fonts, Fonts.com, or Adobe Edge Web Fonts, which are hosted on a third-party site
• Code web fonts into your theme and enqueue them
• Host fonts on your site and add them to your theme

1. How to Change Fonts in WordPress Using Web Fonts

Using web fonts is an easier and quicker way to change fonts in WordPress than downloading and uploading font files.

With this option, you can access a variety of fonts without updating them each time there’s a change, and it doesn’t hog server space on your hosting. The fonts are served directly from the provider’s servers using a plugin or by adding code to your site.

Make sure the web fonts you choose for your site match your brand identity, are easy to read for body text, are familiar to website visitors, and convey the kind of mood and image that you want.

You can add web fonts using a WordPress plugin or manually by adding a few lines of code to your site. Let’s explore both options.

How to Add Web Fonts Using a WordPress Plugin

Depending on the web font you’ve chosen, you can use a WordPress plugin to access the library of fonts and pick out the one you want on your site. For this guide, we chose Google Fonts and used the Google Fonts Typography plugin.

1. To get started, log in to your WordPress admin dashboard, and select Plugins > Add New.

1. Type Google Fonts Typography in the search box, and select Install Now.

1. Select Activate.

1. Next, access the Customizer by going to Appearance > Customize.

1. Select the Google Fonts section.

1. Next, click on the link to open the fonts’ settings and configure them as follows:

• Under Basic Settings, set the default font for your body text, headings, and buttons.

• Under Advanced Settings, configure your site title and description, menu, headings and content, sidebar, and footer.

• Uncheck any unwanted font weights in the Font Loading section to avoid slowing down your site.

If there are fonts on your site that aren’t displaying or working properly, use the Debugging section to troubleshoot.

1. You can test these settings in the Customizer to make sure they’re working the way you want them to, and then select Publish.

Note: If you forget to select publish in the Customizer, you’ll lose all the changes you’ve made.

How to Add Web Fonts Using Code

You can install and use web fonts if you have access to your theme’s code. This is a manual alternative to adding an extra plugin, but it’s not complicated if you follow the steps carefully.

However, there are different steps to take if you’re using a theme from the WordPress theme directory or a customized theme.

If you bought a theme from the WordPress theme directory, create a child theme and then give it the style.css and functions.php file. It’s easier if you have a customized theme as you can edit the stylesheet and functions file from your theme.

1. To get started, select a font from the Google Fonts library, and select the + (plus) icon to add it to your library.

1. Next, select the tab at the bottom where you’ll find the code to add to your site. Go to the Embed font section under the Embed tab. You’ll find the code generated by Google Fonts, which looks something like this:

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

Note: We picked Work Sans for this guide so the font name may be different on yours depending on what you picked.

1. Copy this part of the code: https://fonts.googleapis.com/css2?family=Work+Sans

This allows you to enqueue the style from Google Fonts servers to prevent conflict with third-party plugins. It also allows for easier child theme modifications.

1. To enqueue the font, open the functions file and add the following code. (Replace the link with the link you get from Google Fonts):

function wosib_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);

wp_enqueue_style( ‘googleFonts’);
}

add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ );

1. You can add a new line to your function or to the same line if you want to add more fonts in future as follows:

function mybh_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);

wp_enqueue_style( ‘googleFonts’);
}

add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ );

In this case, we’ve enqueued both Cambria and Work Sans fonts.

The next step is to add the fonts to your theme’s stylesheet to make the font work on your site.

1. To do this, open your theme’s style.css file and add the code to style individual elements with your web fonts as follows:

body {
font-family: ‘Work Sans’, sans-serif;
}

h1, h2, h3 {
font-family: ‘Cambria’, serif;
}

In this case, the main font will be Work Sans while header elements like h1, h2, and h3 will use Cambria.

Once done, save the stylesheet and check whether your fonts are working as they should. If not, check that the fonts aren’t being overridden in the stylesheet, or clear your browser cache and try again.

1. Have a backup font in place to ensure that the fonts can be rendered or accessed easily especially for users with old devices, poor connections, or if the font provider has technical issues. To do this, go to the stylesheet and edit the CSS to read as follows:

body {
font-family: ‘Work Sans’, Arial, sans-serif;
}

h1, h2, h3 {
font-family: ‘Cambria’, Times New Roman, serif;
}

If all is well, your site’s visitors will see your default web fonts, in our case Work Sans and Cambria. If there are issues, they’ll see the backup fonts, for example Arial or Times New Roman in our case.

2. How to Change Fonts in WordPress by Hosting Fonts

Hosting fonts on your own servers helps you optimize the performance of your web fonts, but it’s also a more secure way of doing it instead of pulling in resources from third-party sites.

Google Fonts and other web fonts allow you to download fonts for use as locally hosted fonts, but you can still download other fonts to your computer provided the licenses permit you to do so.

1. To get started, download, unzip, upload the font file to your site and then link it in your stylesheet. In this case you don’t have to enqueue the fonts in the functions.php file as you did with the web fonts. Confirm that the files you’re uploading are in the .woff format before using them on your website.

1. Next, go to wp-content/themes/themename to upload the font file to your theme. 
2. Open the stylesheet and add the following code (in this case we’re using Work Sans font but you can replace that with your own fonts):

@font-face {
font-family: ‘Work Sans’;
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: ‘Work Sans’;
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: ‘Cambria’;
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
font-weight: normal;
font-style: normal;
}

Note: Using @fontface allows you to use bold, italics and other variations of your font, after which you can specify the weight or style for each font.

1. Next, add styling for your elements as follows:

body {
font-family: ‘Work Sans’, Arial, sans-serif;
src: url( “/fonts/Work Sans-Medium.ttf” );
}

h1, h2, h3 {
font-family: ‘Cambria’, Times New Roman, serif;
}

Customize Your WordPress Typography

Changing fonts in WordPress is a great idea to improve the branding and user experience. It’s not a straightforward task, but you’ll have more control over your theme.

Were you able to customize your site’s fonts using the steps using the tips in this guide? Tell us in the comments.

Related posts

• Sida loo raro goobta WordPress mid ka mid ah martida loo yahay mid kale

• Sida loo rakibo & habaynta WordPress ee Microsoft Azure

• Sida si xawli leh loogu socodsiiyo WordPress-ka Microsoft Azure

• Sida loo habeeyo Asturnaanta gudaha WordPress iyo sababta ay muhiim u tahay

• Sida loo rakibo WordPress on Google Cloud Platform

• Sida Loo Kordhiyo Waxqabadka WordPress iyada oo loo marayo Database nadiif ah

• Squarespace Vs WordPress: Waa kee Platform Goobta Wanaagsan?

• Sida Loo Helo Adminkaaga WordPress Login

• Sida Loo Kobciyo Boggaga WordPress

• Waa inuu lahaadaa WordPress Yoast SEO Settings 2022

• Qaabka Qorista Blog ee ugu Wanaagsan si aad Dhibcahaaga u Gudbiso

• Wix Vs WordPress: Keebaa Ugu Wanaagsan Abuurista Mareegtaada?

• Ka ilaali oo ka ilaali mareegaha WordPress jabsadayaasha

• 11-ka ugu Fiican WordPress Podcast Plugins

• Sida Looga Gudbo Tifaftiraha WordPress ee Classic ah una Gudbinaya Gutenberg

• Abuuritaanka Mawduuca Ilmaha ee WordPress

• Sida Looga Daro Dhinac Sabbaynaysa gudaha Wordpress

• Tus qoraalka bogga hoyga ee blogka WordPress

• Sida Loo Sameeyo Tijaabooyin Qaybsan Oo Wax Ku Ool Ah Gudaha WordPress

• WordPress wuxuu muujinayaa qalad HTTP marka la soo gelinayo sawirada