¿Cómo usar las fuentes de Google en React.js?

Había construido un sitio web con React.js y webpack .

Quiero usar fuentes de Google en la página web, así que pongo el enlace en la sección.

Fuentes de Google

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

Y configura CSS

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

Sin embargo, no funciona.

¿Como puedó resolver esté problema?

En algún tipo de archivo CSS principal o de carga inicial, simplemente haga:

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

No necesitas incluir ningún tipo de @ font-face, etc., la respuesta que recibes de la API de Google está lista y te permite usar familias de fuentes como de costumbre.

Luego, en su aplicación principal de React, JavaScript, en la parte superior coloque algo como:

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

Lo que hice en realidad fue hacer una app.cssimportación fonts.csscon algunas importaciones de fuentes. Simplemente por organización (ahora sé dónde están todas mis fuentes). Lo importante que debe recordar es que primero importa las fuentes.

Tenga en cuenta que cualquier componente que importe a su aplicación React debe importarse después de la importación del estilo. Especialmente si esos componentes también importan sus propios estilos. De esta forma puede estar seguro del orden de los estilos. Esta es la razón por la que es mejor importar fuentes en la parte superior de su archivo principal (no olvide verificar su archivo CSS empaquetado final para verificar si tiene problemas).

Hay algunas opciones que puede pasar a la API de fuentes de Google para que sea más eficiente al cargar fuentes, etc. Consulte la documentación oficial: Comience con la API de fuentes de Google

Edite, tenga en cuenta: si se trata de una aplicación "sin conexión", es posible que deba descargar las fuentes y cargarlas a través de Webpack.

Fuentes de Google en React.js?

Abra su hoja de estilo, es decir, app.css, style.css (el nombre que tenga), no importa, simplemente abra la hoja de estilo y pegue este código

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

y no olvide cambiar la URL de su fuente que desee, de lo contrario, funciona bien

y use esto como:

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

Si está utilizando el entorno Create React App, simplemente agregue la regla @import a index.css como tal:

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

Importa index.css en tu aplicación principal de React:

import './index.css'

React le ofrece la opción de estilo en línea, módulos CSS o componentes con estilo para aplicar CSS:

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

debería ver este 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']
  }
});

Acabo de probar este método y puedo decir que funciona muy bien;)

En su archivo CSS, como App.css en una aplicación create-react-app, agregue una importación de fontface. Por ejemplo:

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

Luego, simplemente agregue la fuente al elemento DOM dentro del mismo archivo css.

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

Tuve el mismo problema. Resulta que estaba usando en "lugar de '.

usar @import url('within single quotes');así

no @import url("within double quotes");asi

Agregué @import y @ font-face en mi archivo css y funcionó.

Otra opción para todas las buenas respuestas aquí es el paquete npm react-google-font-loader, que se encuentra aquí .

El uso es simple:

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

// Somewhere in your React tree:

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

Entonces puede usar el apellido en su CSS:

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

Descargo de responsabilidad: soy el autor del react-google-font-loaderpaquete.

Si alguien busca una solución con (.less) intente a continuación. Abra su archivo less principal o común y utilícelo como se muestra a continuación.

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

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

Que podría ser la etiqueta de cierre automático del enlace al final, intente:

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

y en su archivo main.css intente:

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

Aquí hay dos formas diferentes en las que puede agregar fuentes a su aplicación de reacción.

Agregar fuentes locales

1. Cree una nueva carpeta llamada fontsen su srccarpeta.

2. Descargue las fuentes de Google localmente y colóquelas dentro de la fontscarpeta.

3. Abra su index.cssarchivo e incluya la fuente haciendo referencia a la ruta.

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

Aquí agregué una Rajdhanifuente.

Ahora, podemos usar nuestra fuente en clases CSS como esta.

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

Agregar fuentes de Google

Si desea utilizar fuentes de Google (api) en lugar de fuentes locales, puede agregarlas así.

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

Del mismo modo, también puede agregarlo dentro del index.htmlarchivo usando la linketiqueta.

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

(publicado originalmente en https://reactgo.com/add-fonts-to-react-app/ )