Cum se utilizează fonturile Google în React.js? (Programare, Reactjs, Webpack, Api Pentru Fonturi Google)

Kevin Hsiao a intrebat.

Am construit un site web cu React.js și webpack.

Vreau să folosesc fonturi Google în pagina web, așa că am pus linkul în secțiune.

Fonturi Google

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

Și am setat CSS

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

Cu toate acestea, nu funcționează.

Cum pot să rezolv această problemă?

Comentarii

  • Ați pus linkul <link> în antetul paginii, nu în aplicația react, corect? Specificați font-family oriunde altundeva în foaia de stil sau direct pe elementele tale? –  > Por Timo.
  • Folosești https și ai o politică de securitate? –  > Por Stuart.
  • De fapt, știu care este metoda corectă de a importa Google Fonts. Cred că am nevoie de un exemplu simplu. Mă puteți ajuta… –  > Por Kevin Hsiao.
  • cum arată markdown-ul dvs.? definiți alte stiluri care ar putea suprascrie pe cel mai generic? –  > Por manonthemat.
  • Am rezolvat această problemă….. Metoda pe care am încercat-o înainte era greșită. Aceasta este metoda corectă. Utilizarea Google Fonts la nivel local (în hjs-webpack și React) Cu toate acestea, există încă unele erori în procesul webpack. Aceste două linii de cod ar trebui să fie scrise în webpack.config.js fișier. { test: /(.css$)/, loaders: ['style-loader', 'css-loader', 'postcss-loader'] }, { test: /.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' } –  > Por Kevin Hsiao.
12 răspunsuri
Tom

Într-un fel de fișier CSS principal sau primul fișier CSS de încărcare, faceți doar:

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

Nu este nevoie să înfășurați niciun fel de @font-face etc. Răspunsul pe care îl primiți înapoi de la API-ul Google este gata de utilizare și vă permite să utilizați familiile de fonturi ca de obicei.

Apoi, în JavaScript-ul principal al aplicației React, puneți în partea de sus ceva de genul

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

Ceea ce am făcut de fapt a fost să fac un app.css care a importat un fonts.css cu câteva importuri de fonturi. Pur și simplu pentru organizare (acum știu unde sunt toate fonturile mele). Lucrul important de reținut este să importați mai întâi fonturile.

Rețineți că orice componentă pe care o importați în aplicația React ar trebui să fie importată după importul stilului. Mai ales dacă acele componente își importă și propriile stiluri. În acest fel, puteți fi siguri de ordinea stilurilor. Acesta este motivul pentru care este cel mai bine să importați fonturile în partea de sus a fișierului principal (nu uitați să verificați fișierul CSS final împachetat pentru a verifica de două ori dacă aveți probleme).

Există câteva opțiuni pe care le puteți trece API-ul Google Font pentru a fi mai eficient atunci când încărcați fonturi, etc. Consultați documentația oficială: Get Started with the Google Fonts API

Edit, notă: Dacă aveți de-a face cu o aplicație „offline”, atunci este posibil să fie într-adevăr nevoie să descărcați fonturile și să le încărcați prin Webpack.

Comentarii

  • puteți să explicați de ce nu funcționează modalitatea de utilizare a linkului în html head ? –  > Por doobean.
Rizo

Fonturi Google în React.js?

Deschideți foaia de stiluri, adică app.css, style.css (ce nume aveți), nu contează, doar deschideți foaia de stiluri și lipiți acest cod

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

și nu uitați să schimbați URL-ul fontului pe care îl doriți, altfel funcționează bine

și utilizați acest lucru ca :

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

Comentarii

  • Nu este mai bine să încărcați fonturile cu JS? Vreau să spun din motive de perfomanță. –  > Por Simon Franzen.
  • puteți să explicați de ce nu funcționează modul de utilizare a linkului în html head ? –  > Por doobean.
Max

Dacă utilizați mediul Create React App, pur și simplu adăugați regula @import la index.css ca atare:

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

Import index.css în aplicația React principală:

import './index.css'

React vă oferă posibilitatea de a alege între stilizare în linie, module CSS sau componente stilizate pentru a aplica CSS:

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

aldobsom

ar trebui să vedeți acest tutorial: 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']
  }
});

Tocmai am încercat această metodă și pot spune că funcționează foarte bine 😉

mrdougwright

În fișierul dvs. CSS, cum ar fi App.css într-o aplicație create-react-app, adăugați un fontface de import. De exemplu:

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

Apoi, pur și simplu adăugați fontul la elementul DOM în cadrul aceluiași fișier css.

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

Comentarii

  • Este @font-face dacă ați vrut să faceți asta și nu este necesar cu API-ul de fonturi de la Google. –  > Por Tom.
  • Dar ce se întâmplă dacă doriți să vă definiți fonturile într-un fișier css, pentru că acolo este locul lor? Dar tot vreți să profitați de găzduirea Google? Nu este necesar atunci sau există o modalitate mai bună? –  > Por piatră.
saigowthamr

Iată două moduri diferite prin care puteți adăuga fonturi la aplicația dvs. react.

Adăugarea fonturilor locale

  1. Creați un nou dosar numit fonts în fișierul dvs. src folder.

  2. Descărcați fonturile Google la nivel local și plasați-le în interiorul folderului fonts folder.

  3. Deschideți fișierul dvs. index.css și includeți fontul făcând referire la calea de acces.

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

Aici am adăugat un Rajdhani font.

Acum, putem folosi fontul nostru în clasele css astfel.

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

Adăugarea fonturilor Google

Dacă vă place să utilizați fonturi Google (api) în loc de fonturi locale, puteți să le adăugați astfel.

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:[email protected];500&display=swap');

În mod similar, îl puteți adăuga și în interiorul clasei index.html folosind link tag.

<link href="https://fonts.googleapis.com/css2?family=Rajdhani:[email protected];500&display=swap" rel="stylesheet">

(postat inițial la https://reactgo.com/add-fonts-to-react-app/)

Deke

Am avut aceeași problemă. Se pare că am folosit " în loc de '.

use @import url('within single quotes'); în felul următor

nu @import url("within double quotes"); ca aceasta

Jake Taylor

O altă opțiune pentru toate răspunsurile bune de aici este pachetul npm react-google-font-loader, , găsit aici.

Utilizarea este simplă:

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

// Somewhere in your React tree:

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

Apoi puteți folosi numele familiei în CSS:

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

Disclaimer: Eu sunt autorul react-google-font-loader pachet.

Heather Akpan

Am adăugat @import și @font-face în fișierul css și a funcționat.

Comentarii

  • nu aveți nevoie de ambele pentru fonturile Google, ci doar de @import ar trebui să fie suficient stackoverflow.com/questions/48057801/… –  > Por Luciano.
Jaison James

Dacă cineva caută o soluție cu (.less) încercați mai jos. Deschideți fișierul dvs. principal sau comun less și utilizați ca mai jos.

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

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

rupert

It ar putea fi tag-ul de autoînchidere a linkului la sfârșit, încercați:

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

și în fișierul main.css încercați:

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

Dexter’s

În unele cazuri, resursa de font poate fi undeva în directorul de proiect.Deci, o puteți încărca astfel folosind 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();