React.js'de Google yazı tipleri nasıl kullanılır?

React.js ve web paketi ile bir web sitesi kurmuştum .

Web sayfasında Google yazı tiplerini kullanmak istiyorum , bu yüzden bağlantıyı bölüme koyuyorum.

Google Yazı Tipleri

<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet">

Ve CSS'yi ayarlayın

body{
    font-family: 'Bungee Inline', cursive;
}

Ancak çalışmıyor.

Bu sorunu nasıl çözebilirim?

Bir tür ana veya ilk yükleme CSS dosyasında şunları yapmanız yeterlidir:

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:regular,bold,italic&subset=latin,latin-ext');

Herhangi bir tür @ font-face, vb. Yazmanıza gerek yok, Google'ın API'sinden aldığınız yanıt kullanıma hazırdır ve normal gibi font ailelerini kullanmanıza izin verir.

Ardından ana React uygulamanızın JavaScript'inde, en üste şöyle bir şey koyun:

import './assets/css/fonts.css';

Aslında yaptığım şey, birkaç yazı tipi içe aktarmayla app.cssithal edilen bir fonts.cssoldu. Sadece organizasyon için (artık tüm yazı tiplerimin nerede olduğunu biliyorum). Unutulmaması gereken önemli şey, önce yazı tiplerini içe aktarmanızdır.

React uygulamanıza aktardığınız herhangi bir bileşenin stil içe aktarıldıktan sonra içe aktarılması gerektiğini unutmayın. Özellikle bu bileşenler kendi stillerini de içe aktarıyorsa. Bu şekilde stillerin sıralandığından emin olabilirsiniz. Bu nedenle, yazı tiplerini ana dosyanızın en üstüne içe aktarmak en iyisidir (sorun yaşayıp yaşamadığınızı tekrar kontrol etmek için paketlenmiş son CSS dosyanızı kontrol etmeyi unutmayın).

Yazı tiplerini yüklerken daha verimli olmak için Google Yazı Tipi API'sini geçirebileceğiniz birkaç seçenek vardır. Resmi belgelere bakın: Google Yazı Tipleri API'sini Kullanmaya Başlayın

Düzenleyin, not edin: "Çevrimdışı" bir uygulamayla uğraşıyorsanız, yazı tiplerini indirmeniz ve Webpack aracılığıyla yüklemeniz gerekebilir.

React.js'de Google yazı tipleri?

Stil sayfanızı açın, yani app.css, style.css (hangi isme sahip olduğunuz) fark etmez, sadece stil sayfasını açın ve bu kodu yapıştırın

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');

ve yazı tipinizin URL'sini istediğiniz gibi değiştirmeyi unutmayın, aksi takdirde iyi çalışıyor

ve bunu şu şekilde kullanın:

body {
  font-family: 'Josefin Sans', cursive;
}

Create React App ortamını kullanıyorsanız, index.css'ye @import kuralı eklemeniz yeterlidir :

@import url('https://fonts.googleapis.com/css?family=Anton');

Ana React uygulamanızda index.css dosyasını içe aktarın :

import './index.css'

React, CSS'yi uygulamak için size Satır içi stil, CSS Modülleri veya Stilli Bileşenler seçeneği sunar:

font-family: 'Anton', sans-serif;

bu öğreticiyi görmelisiniz: https://scotch.io/@micwanyoike/how-to-add-fonts-to-a-react-project

import WebFont from 'webfontloader';

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

Bu yöntemi yeni denedim ve çok iyi çalıştığını söyleyebilirim;)

Create-react-app uygulamasındaki App.css gibi CSS dosyanıza bir fontface içe aktarımı ekleyin. Örneğin:

@fontface {
  font-family: 'Bungee Inline', cursive;
  src: url('https://fonts.googleapis.com/css?family=Bungee+Inline')
}

Ardından, yazı tipini aynı css dosyası içindeki DOM öğesine ekleyin.

body {
  font-family: 'Bungee Inline', cursive;
}

Aynı sorunu yaşadım. Yerine kullandığım "ortaya çıktı' .

@import url('within single quotes');bunun gibi kullan

değil @import url("within double quotes");böyle

@İmport ve @ font-face'i css dosyama ekledim ve işe yaradı.

Burada iyi cevapların hepsi için bir başka seçenek npm paketidir react-google-font-loaderbulundu burada .

Kullanım basittir:

import GoogleFontLoader from 'react-google-font-loader';

// Somewhere in your React tree:

<GoogleFontLoader
    fonts={[
        {
            font: 'Bungee Inline',
            weights: [400],
        },
    ]}
/>

O zaman CSS'nizde sadece aile adını kullanabilirsiniz:

body {
    font-family: 'Bungee Inline', cursive;
}

Yasal Uyarı: Ben yazarı olduğum react-google-font-loaderpaketin.

React uygulamanıza yazı tipi eklemenin iki farklı yolu.

Yerel yazı tipleri ekleme

1. Adlı yeni bir klasör oluşturun fontssizin de srcklasöründe.

2. Google yazı tiplerini yerel olarak indirin ve fontsklasörün içine yerleştirin .

3. index.cssDosyanızı açın ve yola referans vererek yazı tipini ekleyin.

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

Burada bir ekledim Rajdhani yazı tipi .

Artık fontumuzu bu gibi css sınıflarında kullanabiliriz.

.title{
    font-family: Rajdhani, serif;
    color: #0004;
}

Google yazı tiplerini eklemek

Yerel yazı tipleri yerine google yazı tiplerini (api) kullanmayı seviyorsanız, bu şekilde ekleyebilirsiniz.

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;500&display=swap');

Benzer şekilde, etiketini index.htmlkullanarak dosyanın içine de ekleyebilirsiniz link.

<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;500&display=swap" rel="stylesheet">

(ilk olarak https://reactgo.com/add-fonts-to-react-app/ adresinde yayınlanmıştır )

(.Less) ile bir çözüm arayan biri varsa, aşağıyı deneyin. Ana veya genel daha az dosyanızı açın ve aşağıdaki gibi kullanın.

@import (css) url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');

body{
  font-family: "Open Sans", sans-serif;
}

Sonunda bağlantının kendi kendine kapanan etiketi olabilir , şunu deneyin:

<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet"/> 

ve main.css dosyanızda şunu deneyin:

body,div {
  font-family: 'Bungee Inline', cursive;
}

Bazı durumlarda yazı tipi kaynağınız proje dizininizde bir yerde olabilir. Böylece SCSS kullanarak bu şekilde yükleyebilirsiniz

 $list: (
      "Black",
      "BlackItalic",
      "Bold",
      "BoldItalic",
      "Italic",
      "Light",
      "LightItalic",
      "Medium",
      "MediumItalic",
      "Regular",
      "Thin",
      "ThinItalic"
    );
    
    @mixin setRobotoFonts {
      @each $var in $list {
        @font-face {
          font-family: "Roboto-#{$var}";
          src: url("../fonts/Roboto-#{$var}.ttf") format("ttf");
        }
      }
    }
@include setRobotoFonts();