Jak używać czcionek Google w React.js?

Zbudowałem stronę internetową z React.js i pakietem webpack .

Chcę używać czcionek Google na stronie, więc wstawiam link w sekcji.

Czcionki Google

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

I ustaw CSS

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

Jednak to nie działa.

Jak mogę rozwiązać ten problem?

W jakimś głównym lub pierwszym ładowanym pliku CSS po prostu wykonaj:

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

Nie musisz zawijać żadnych znaków @ font-face itp. Odpowiedź, którą otrzymujesz z interfejsu API Google, jest gotowa do pracy i pozwala korzystać z rodzin czcionek w normalny sposób.

Następnie w swojej głównej aplikacji React JavaScript u góry umieść coś takiego:

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

To, co właściwie zrobiłem, zostało app.csszaimportowane fonts.cssz kilkoma importami czcionek. Po prostu dla organizacji (teraz wiem, gdzie są wszystkie moje czcionki). Należy pamiętać, że najpierw należy zaimportować czcionki.

Pamiętaj, że każdy komponent importowany do aplikacji React powinien zostać zaimportowany po zaimportowaniu stylu. Zwłaszcza jeśli te komponenty również importują swoje własne style. W ten sposób możesz być pewien kolejności stylów. Dlatego najlepiej jest zaimportować czcionki u góry głównego pliku (nie zapomnij sprawdzić ostatecznego dołączonego pliku CSS, aby dokładnie sprawdzić, czy masz problemy).

Jest kilka opcji, które możesz przekazać Google Font API, aby być bardziej wydajnym podczas ładowania czcionek itp. Zobacz oficjalną dokumentację: Rozpocznij pracę z Google Fonts API

Edytuj, uwaga: jeśli masz do czynienia z aplikacją „offline”, może być konieczne pobranie czcionek i załadowanie za pomocą Webpack.

Czcionki Google w React.js?

Otwórz swój arkusz stylów, tj. App.css, style.css (jaką masz nazwę), nie ma znaczenia, po prostu otwórz arkusz stylów i wklej ten kod

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

i nie zapomnij zmienić adresu URL swojej czcionki, którą chcesz, w przeciwnym razie działa dobrze

i użyj tego jako:

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

Jeśli używasz środowiska Create React App, po prostu dodaj regułę @import do index.css w następujący sposób:

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

Importuj plik index.css w swojej głównej aplikacji React:

import './index.css'

React daje Ci wybór między stylami Inline, modułami CSS lub stylowanymi komponentami w celu zastosowania CSS:

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

powinieneś zobaczyć ten samouczek: 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']
  }
});

Właśnie wypróbowałem tę metodę i mogę powiedzieć, że działa bardzo dobrze;)

W pliku CSS, takim jak App.css w aplikacji create-react-app, dodaj import fontface. Na przykład:

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

Następnie po prostu dodaj czcionkę do elementu DOM w tym samym pliku css.

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

Miałem ten sam problem. Okazuje się, że "zamiast' .

posługiwać się @import url('within single quotes'); ten sposób

nie @import url("within double quotes");tak

Dodałem @import i @ font-face w moim pliku css i zadziałało.

Inną opcją na wszystkie dobre odpowiedzi tutaj jest pakiet npm react-google-font-loader, który znajduje się tutaj .

Użycie jest proste:

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

// Somewhere in your React tree:

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

Następnie możesz po prostu użyć nazwiska w swoim CSS:

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

Zastrzeżenie: jestem autorem react-google-font-loaderpakietu.

Oto dwa różne sposoby dodawania czcionek do aplikacji reagowania.

Dodawanie lokalnych czcionek

1. Utwórz nowy folder o nazwie fontsw Twoim srcfolderze.

2. Pobierz czcionki Google lokalnie i umieść je w fontsfolderze.

3. Otwórz index.cssplik i dołącz czcionkę, odwołując się do ścieżki.

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

Tutaj dodałem Rajdhaniczcionkę.

Teraz możemy używać naszej czcionki w takich klasach css.

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

Dodawanie czcionek Google

Jeśli wolisz używać czcionek Google (api) zamiast czcionek lokalnych, możesz to dodać w ten sposób.

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

Podobnie możesz również dodać go do index.htmlpliku za pomocą linktagu.

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

(pierwotnie opublikowane na https://reactgo.com/add-fonts-to-react-app/ )

Jeśli ktoś szuka rozwiązania z (.less), spróbuj poniżej. Otwórz swój główny lub mniejszy plik i użyj go jak poniżej.

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

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

Może to być samozamykający się tag linku na końcu, spróbuj:

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

aw pliku main.css spróbuj:

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

W niektórych przypadkach zasób czcionek może znajdować się gdzieś w katalogu projektu. Możesz więc załadować go w ten sposób za pomocą SCSS

 $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();