WordPress sitenize biraz marka bilinci oluşturma ve bireysellik katmanın harika bir yolu, temanızdaki yazı tiplerini değiştirmektir.

Tipografi ve diğer bantlama öğeleri, iyi bir ilk izlenim yaratır, sitenizin ziyaretçilerinin ruh halini belirler ve markanızın kimliğini oluşturur. Araştırmalar^(Studies) ayrıca yazı tiplerinin okuyucuların öğrenme, bilgileri hatırlama ve metinleri ezberleme yeteneklerini etkilediğini bulmuştur.

Yeni bir WordPress teması yüklediyseniz^{(installed a WordPress theme)} veya biraz CSS ve kodlama deneyiminiz varsa, size ^(CSS)WordPress'te^(WordPress) yazı tiplerini değiştirmek için kullanabileceğiniz birkaç seçenek göstereceğiz .

WordPress'te Yazı Tipleri Nasıl Değiştirilir^{(How to Change Fonts in WordPress)}

WordPress'te yazı tiplerini değiştirebileceğiniz üç ana seçenek vardır:

• Üçüncü taraf bir sitede barındırılan Google Fonts , Fonts.com veya Adobe Edge Web Fonts gibi web fontlarını kullanın
• ^(Code)Web yazı tiplerini temanıza kodlayın ve sıraya alın
• Yazı^(Host) tiplerini sitenizde barındırın ve temanıza ekleyin

1. Web Yazı Tiplerini Kullanarak WordPress'te Yazı Tipleri Nasıl Değiştirilir^{(1. How to Change Fonts in WordPress Using Web Fonts)}

Web yazı tiplerini kullanmak, WordPress'te^(WordPress) yazı tiplerini değiştirmenin yazı tipi dosyalarını indirip yüklemekten daha kolay ve hızlı bir yoludur.

Bu seçenekle, her değişiklik olduğunda güncelleme yapmadan çeşitli yazı tiplerine erişebilirsiniz^{(access a variety of fonts)} ve bu, barındırma sunucunuzda yer kaplamaz. Yazı tipleri, bir eklenti kullanılarak veya sitenize kod eklenerek doğrudan sağlayıcının sunucularından sunulur.

^(Make)Siteniz için seçtiğiniz web yazı tiplerinin marka kimliğinize uygun olduğundan, gövde metni için okunması kolay olduğundan, web sitesi ziyaretçilerinin aşina olduğundan ve istediğiniz ruh halini ve görüntüyü ilettiğinden emin olun .

Bir WordPress eklentisi kullanarak^{(using a WordPress plugin)} veya sitenize birkaç satır kod ekleyerek manuel olarak web yazı tipleri ekleyebilirsiniz . Her iki seçeneği de inceleyelim.

WordPress Eklentisi Kullanarak Web Yazı Tipleri Nasıl Eklenir^{(How to Add Web Fonts Using a WordPress Plugin)}

Seçtiğiniz web yazı tipine bağlı olarak, yazı tipi kitaplığına erişmek ve sitenizde istediğinizi seçmek için bir WordPress eklentisi kullanabilirsiniz. ^(WordPress)Bu kılavuz için Google Fonts'u^{(Google Fonts)} seçtik ve Google Fonts Tipografi^{(Google Fonts Typography)} eklentisini kullandık.

1. Başlamak için WordPress yönetici kontrol panelinize giriş yapın ve Plugins > Add New seçin .

1. Arama kutusuna Google Yazı Tipleri Tipografisi yazın ve ^{(Google Fonts Typography)}Şimdi Yükle^{(Install Now)} 'yi seçin .

1. Etkinleştir^(Activate) öğesini seçin .

1. Ardından, Appearance > Customize seçeneğine giderek Özelleştiriciye^(Customizer) erişin .

1. Google Yazı Tipleri^{(Google Fonts)} bölümünü seçin .

1. Ardından, yazı tiplerinin ayarlarını açmak için bağlantıya tıklayın ve bunları aşağıdaki gibi yapılandırın:

• Temel Ayarlar^{(Basic Settings)} altında , gövde metniniz, başlıklarınız ve düğmeleriniz için varsayılan yazı tipini ayarlayın.

• Gelişmiş Ayarlar^{(Advanced Settings)} altında site başlığınızı ve açıklamanızı, menünüzü, başlıklarınızı ve içeriğinizi, kenar çubuğunuzu ve alt bilginizi yapılandırın.

• ^(Uncheck)Sitenizi yavaşlatmaktan kaçınmak için ^{(avoid slowing down your site)}Yazı Tipi Yükleme^{(Font Loading)} bölümünde istenmeyen yazı tipi ağırlıklarının işaretini kaldırın .

Sitenizde düzgün görüntülenmeyen veya çalışmayan yazı tipleri varsa, sorunu gidermek için Hata Ayıklama bölümünü kullanın.^{(Debugging )}

1. İstediğiniz şekilde çalıştıklarından emin olmak için bu ayarları Özelleştirici'de test edebilir ve ardından ^(Customizer)Yayınla'yı^(Publish) seçebilirsiniz .

Not : ^(Note)Özelleştirici'de^(Customizer) yayınla'yı seçmeyi unutursanız , yaptığınız tüm değişiklikleri kaybedersiniz.

Kod Kullanarak Web Fontları Nasıl Eklenir^{(How to Add Web Fonts Using Code)}

Temanızın koduna erişiminiz varsa, web yazı tiplerini yükleyebilir ve kullanabilirsiniz. Bu, fazladan bir eklenti eklemenin manuel bir alternatifidir, ancak adımları dikkatli bir şekilde izlerseniz karmaşık değildir.

Ancak, WordPress^(WordPress) tema dizininden bir tema veya özelleştirilmiş bir tema kullanıyorsanız atmanız gereken farklı adımlar vardır .

WordPress tema dizininden bir tema satın aldıysanız , bir alt tema oluşturun^{(create a child theme)} ve ardından ona style.css ve functions.php dosyasını verin. Stil sayfasını ve işlevler dosyasını temanızdan düzenleyebileceğiniz için özelleştirilmiş bir temanız varsa daha kolaydır.

1. Başlamak için Google Fonts kitaplığından bir yazı tipi seçin ve kitaplığınıza eklemek için + (plus)

1. Ardından, sitenize eklenecek kodu bulacağınız alttaki sekmeyi seçin. Göm^(Embed) sekmesinin altındaki Göm yazı tipi^{(Embed font)} bölümüne gidin . Google Fonts tarafından oluşturulan ve şuna benzeyen kodu bulacaksınız :

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

Not : Bu kılavuz için ^(Note)Work Sans'ı^(Sans) seçtik , bu nedenle seçtiğiniz şeye bağlı olarak yazı tipi adı sizinkinden farklı olabilir.

1. Kodun bu bölümünü kopyalayın: https://fonts.googleapis.com/css2?family=Work+Sans

Bu, üçüncü taraf eklentilerle çakışmayı önlemek için stili Google Fonts sunucularından kuyruğa almanıza olanak tanır . Ayrıca daha kolay alt tema değişikliklerine izin verir.

1. Yazı tipini kuyruğa almak için işlevler dosyasını açın ve aşağıdaki kodu ekleyin. ( Bağlantıyı Google Fonts'tan^{(Google Fonts)} aldığınız bağlantıyla değiştirin^(Replace) ):

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. Gelecekte daha fazla yazı tipi eklemek isterseniz, işlevinize veya aynı satıra aşağıdaki gibi yeni bir satır ekleyebilirsiniz:

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');

Bu durumda, hem Cambria^(Cambria) hem de Work Sans yazı tiplerini kuyruğa aldık .

Sonraki adım, yazı tipinin sitenizde çalışmasını sağlamak için yazı tiplerini temanızın stil sayfasına eklemektir.

1. Bunu yapmak için, temanızın style.css dosyasını açın ve web yazı tiplerinizle ayrı ayrı öğeleri stilize etmek için kodu aşağıdaki gibi ekleyin:

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

h1, h2, h3 {
yazı tipi ailesi: 'Cambria', serif; ^{(font-family: ‘Cambria’, serif;)}
}

Bu durumda, ana yazı tipi Work Sans olurken h1, h2 ve h3 gibi başlık öğeleri Cambria'yı^(Cambria) kullanır .

Bitirdikten sonra, stil sayfasını kaydedin ve yazı tiplerinizin gerektiği gibi çalışıp çalışmadığını kontrol edin. Değilse, stil sayfasında yazı tiplerinin geçersiz kılınmadığını kontrol edin veya tarayıcı önbelleğinizi temizleyip yeniden deneyin.

1. Özellikle eski cihazlara, zayıf bağlantılara sahip veya yazı tipi sağlayıcısının teknik sorunları olan kullanıcılar için yazı tiplerinin kolayca oluşturulabilmesini veya erişilebilmesini sağlamak için bir yedek yazı tipi bulundurun. Bunu yapmak için stil sayfasına gidin ve CSS'yi^(CSS) aşağıdaki gibi okuyacak şekilde düzenleyin:

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

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

Her şey yolundaysa, sitenizin ziyaretçileri, bizim durumumuzda Work Sans ve Cambria gibi varsayılan web yazı tiplerinizi görecektir . Sorunlar varsa , bizim durumumuzda Arial veya Times New Roman gibi yedek yazı tiplerini göreceklerdir .

2. Yazı Tiplerini Barındırarak WordPress'te Yazı Tipleri Nasıl Değiştirilir^{(2. How to Change Fonts in WordPress by Hosting Fonts)}

Yazı tiplerini kendi sunucularınızda barındırmak, web yazı tiplerinizin performansını optimize etmenize yardımcı olur, ancak aynı zamanda , üçüncü taraf sitelerden kaynak çekmek yerine bunu yapmanın daha güvenli bir yoludur .^{(a more secure way)}

Google Yazı Tipleri ve diğer web yazı tipleri, yerel olarak barındırılan yazı tipleri olarak kullanmak üzere yazı tiplerini indirmenize izin verir, ancak lisansların izin vermesi koşuluyla, diğer yazı tiplerini yine de bilgisayarınıza indirebilirsiniz.

1. Başlamak için, indirin, sıkıştırmayı açın, yazı tipi dosyasını sitenize yükleyin ve ardından stil sayfanıza bağlayın. Bu durumda, web yazı tiplerinde yaptığınız gibi function.php dosyasındaki yazı tiplerini sıraya koymanız gerekmez. Web sitenizde kullanmadan önce yüklediğiniz dosyaların .woff biçiminde olduğunu doğrulayın.^(.woff)

1. Ardından, yazı tipi dosyasını temanıza yüklemek  için wp-content/themes/themename
2. Stil sayfasını açın ve aşağıdaki kodu ekleyin (bu durumda Work Sans yazı tipini kullanıyoruz ama bunu kendi yazı tiplerinizle değiştirebilirsiniz):

@font-face {
font-family: 'İş Sans'; ^{(font-family: ‘Work Sans’;)}
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
yazı tipi ağırlığı: normal; ^{( font-weight: normal;)}
yazı tipi stili: normal; ^{( font-style: normal;)}
}

@font-face {
font-family: 'İş Sans'; ^{( font-family: ‘Work Sans’;)}
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
yazı tipi ağırlığı: kalın; ^{( font-weight: bold;)}
yazı tipi stili: normal; ^{(font-style: normal;)}
}

@font-face {
font-family: 'Cambria';
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
yazı tipi ağırlığı: normal; ^{( font-weight: normal;)}
yazı tipi stili: normal; ^{( font-style: normal;)}
}

Not^(Note) : @fontface kullanmak, yazı tipinizin kalın, italik ve diğer varyasyonlarını kullanmanıza olanak tanır, ardından her yazı tipi için ağırlık veya stil belirleyebilirsiniz.

1. Ardından, öğeleriniz için aşağıdaki gibi stil ekleyin:

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

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

WordPress Tipografinizi Özelleştirin^{(Customize Your WordPress Typography)}

WordPress'te^(WordPress) yazı tiplerini değiştirmek , marka bilinci oluşturma ve kullanıcı deneyimini geliştirmek için harika bir fikirdir. Bu basit bir görev değil, ancak temanız üzerinde daha fazla kontrole sahip olacaksınız.

^(Were)Bu kılavuzdaki ipuçlarını kullanarak sitenizin yazı tiplerini özelleştirebildiniz mi ? Yorumlarda^(Tell) bize bildirin.

How to Change Fonts in WordPress

A great way to add ѕome branding and indiνidualism 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

• WordPress site'i bir barından diğerine nasıl taşınır

• Microsoft Azure'te WordPress Nasıl Kurulur ve Kurulur

• Microsoft Azure hızlı WordPress blazingly nasıl çalıştırılır

• WordPress'de Privacy nasıl yapılandırılır ve neden önemlidir?

• WordPress Google Cloud Platform'de Nasıl Kurulur

• WordPress Yönetici Girişinizi Nasıl Bulunur?

• WordPress'te PHP Nasıl Güncellenir

• Bilgisayarınıza WordPress Test Sitesi Nasıl Kurulur

• 8 ücretsiz Premium WordPress temaları yüklemek için

• Klasik WordPress Editöründen Gutenberg'e Nasıl Geçiş Yapılır?

• Nasıl bir WordPress Site Secure Yapmak

• AdSense'tan bir web sitesinin yasaklanıp yasaklanmadığını kontrol ediniz

• Mobil Dostu Bir Web Sitesi İçin 7 WordPress İpucu

• Kullanıcıları WordPress'teki 404 sayfadan yönlendirir

• WordPress'in P2 Temasını Kullanarak Kendi Twitter Benzeri Web Sitenizi Nasıl Kurabilirsiniz?

• WordPress Web Sitenizdeki Sayfaları Parolayla Nasıl Korursunuz?

• WordPress Sitenizi Nasıl Yedeklersiniz?

• WordPress yılında Child Theme oluşturma

• Küçük İşletme Web Sitesi İçin 10 Temel WordPress Eklentisi

• Squarespace Vs WordPress: Hangisi Daha İyi Site Platformu?