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

96

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?

Kevin Hsiao
fuente
1
Pones el <link>en el encabezado de la página, no en tu aplicación de reacción, ¿correcto? ¿Especifica el en font-familycualquier otro lugar de su hoja de estilo o en sus elementos directamente?
Timo
¿Está utilizando https y tiene una política de seguridad?
Stuart
De hecho, sé cuál es el método correcto para importar fuentes de Google. Creo que necesito un ejemplo sencillo. ¿Me pueden ayudar ...?
Kevin Hsiao
¿Cómo se ve su rebaja? ¿Está definiendo otros estilos que podrían sobrescribir el más genérico?
manonthemat
Había resuelto este problema ... El método que probé antes era incorrecto. Este es el método correcto. Uso de Google Fonts localmente (en hjs-webpack y React) Sin embargo, todavía hay algún error en el proceso del paquete web. Esos dos códigos de línea deben escribirse en el archivo webpack.config.js . { test: /(\.css$)/, loaders: ['style-loader', 'css-loader', 'postcss-loader'] }, { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
Kevin Hsiao

Respuestas:

83

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.

Tom
fuente
¿Puede explicar por qué no funciona la forma de usar el enlace en el encabezado html?
Doobean
58

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;
}
Rizo
fuente
¿No es mejor cargar las fuentes con JS? Me refiero a razones de rendimiento.
Simon Franzen
¿Puede explicar por qué no funciona la forma de usar el enlace en el encabezado html?
Doobean
21

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;
Max
fuente
8

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;
}
mrdougwright
fuente
3
Es @ font-face si desea hacer eso y no es necesario con la API de fuentes de Google.
Tom
Pero, ¿qué pasa si desea definir sus fuentes en un archivo css, porque ahí es donde pertenecen? ¿Pero aún desea aprovechar el alojamiento de Google? ¿No es necesario entonces, o hay una mejor manera?
piedra
5

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

Deke
fuente
2

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.

Jake Taylor
fuente
1

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;
}
Jaison
fuente
0

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;
}
rupert
fuente
0

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/ )

saigowthamr
fuente