React JS Font Ekleme / İmport Nasıl Yapılır?

Tasarımlarımızda farklı fontlar kullanıyoruz. Fakat tarayıcılar ile gelen ön tanımlı fontlar sınırlı sayıda. Bu durumda sayfamızı tasarlarken font eklemek (import) zorunda kalabiliriz. React Js ile font import etmek için farklı yöntemler bulunmakta. İhtiyacımız olan yöntemi seçerek React uygulamamıza istediğimiz fonut ekleyebiliriz.

React Font İmport

Eğer font dosyalarını proje klasörüne yüklediyseniz, bu yöntem ile uygulamanıza ekleyebilirsiniz. Böylece uygulama build edildiğinde fontlarda uygulamaya dahil edilmiş olacaktır.

Bunun için öncelikle fontlarınızı proje klasörü içerisinde bir yere kaydetmeniz gerekiyor. Mesela Google Font üzerinden La Belle Aurore isimli fontu indiriyoruz ve proje klasörümüz içerisinde bulunan src klasöründe oluşturacağımız fonts klasörünün içerisine kayıt ediyoruz. Dosya zip olarak indirildiği için önce zip dosyasından çıkartıp sonrasında çıkan dosyaları fonts klasörüne kayıt ediyoruz.

Sonra index.js dosyamız içerisinde bu fontu import ediyoruz. Font ismi LaBelleAurore-Regular.ttf

import "./fonts/LaBelleAurore-Regular.ttf";

Fontu projeye dahil ettiğimize göre artık index.css üzerinde de bunu belirtmeliyiz. Fontumuzun tipini format bölümünde belirtmeliyiz. Bu tipler woff2, truetype, opentype, embedded-opentype olabilir.

@font-face {
  font-family: 'LaBelleArurore';
  src: local('LaBelleArurore'), url(./fonts/LaBelleAurore-Regular.ttf) format('ttf');
}

Artık istediğimiz css sınıfları içerisinde bu fontu kullanabiliriz.

.title {
    font-family: LaBelleArurore;
    font-size: 39px;
    color: red;
}

Şimdi App komponenti içerisinde bu sınıfı kullanalım.

<h1 className="title">Deneme</h1>

Artık istediğimiz gibi bu fontu uygulamamızda kullanabiliriz.

Fontu Public Klasörüne Koyarak Uygulamaya Ekleme

React projesinin ana dizininde bulunan public klasörü özel bir klasördür. Bu klasör içerisindeki dosyalara web sayfası üzerinden doğrudan ulaşılabilir. Mesela public klasörüne *manzara.jpg adında bir resim yüklediğimizde o resime ulaşmamız için web sayfası içerisinden

<img src="manzara.jpg" alt="manzara" />

şeklinde ulaşabiliriz. Eğer uygulamamızın içerisinde kullanacak olursak aynı resime

<img src="%PUBLIC_URL%/manzara.jpg" alt="manzara" />

şeklinde kullanabiliriz. Yarıca public klasörüne uygulama içerisinde

process.env.PUBLIC_URL

şeklinde de ulaşabiliriz. Şimdi fontumuzu public klasörü içerisinde oluşturacağımız fonts klasörü içerisinde kopyalayalım.

Artık LaBelleAurore-Regular.ttf isimli font dosyamız public/fonts klasörünün içerisinde. Ardından public klasörü içerisinde index.css adında bir sitil dosyası oluşturalım ve içerisinde fontumuzu import edeceğimiz kodu ekleyelim.

@font-face {
  font-family: 'LaBelleArurore';
  src: local('LaBelleArurore'), url(fonts/LaBelleAurore-Regular.ttf) format('ttf');
}

Artık yapmamız gereken normal bir font dosyasını web sayfasına ekler gibi public klasörü içerisinde bulunan index.html dosyasında head etiketleri arasına

<link rel="stylesheet" href="%PUBLIC_URL%/index.css">

şeklinde index.css dosyasını sayfaya eklemek. Kısaca nasıl yaptık,

• Önce public klasörü içerisinde bir fonts klasörü oluşturduk, fontumuzu buraya yükledik.
• Sonrasında yine public klasörü içerisinde index.css adında bir sitil dosyası oluşturduk ve burada fontumuzun nasıl yükleneceğini belirttik.
• Sonrasında public klasörü içerisinde bulunan uygulama ana dosyası olan index.hmll dosyanın head bölümünde bu css dosyasını sayfamıza ekledik.
• Ve artık fontumuzu LaBelleArurore adı ile css font-family özelliği ile birlikte kullanabiliriz.

webfonts-loader İle Font İmport Etmek

Sayfaya font import etmek için geliştirilmiş olan webfonts-loader ile de uygulamada kullanılmak üzere sayfaya font eklenebilir. Bunun için

npm install webfonts-loader ile paketi kuralım.

Sonrasında paketi uygulamaya import edelim ve istediğimizi fontu yükleyelim.

import WebFont from 'webfontloader';

WebFont.load({
   google: {
     families: ['Quicksand Web:300,400,700', 'sans-serif']
   }
});

Artık fontumuzu istediğimiz gibi kullanabiliriz. Şimdi App.css içerisinde bir sınıfta kullanalım.

.title {
    font-family: Quicksand;
    font-size: 29px;
    font-color: red;
}

Ve bu fontu App.js içerisinde kullanalım.

...
    return (
        <div>
            <h1 className="title">Bir Başlık</h1>
        </div>
    );
...

Bu kadar basit. Daha farklı şekillerde de uygulamaya fontlar eklenebilir. Hangi yönetemin kullanılacağı, uygulamanın ihtiyaçlarına göre belirlenebilir.

Sonuç

Yazılarımızı sunarken fontlar önemlidir, bu nedenlede React uygulamalarına font eklemek gerektiğinde farklı yöntemler kullanılabilir. Sonuç olarak font eklemek için normal css font ekleme kurallarını kullanıyoruz. Bunun haricinde bunu reactte bildirmek için de yukarıdaki yöntemlerden istenilen kullanılabilir.

React JS hakkında sormak istediğiniz tüm soruları yorumlardan bize sorabilirsiniz.