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

google new font

Question

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

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

Fuentes de Google

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

Y establecer CSS

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

Sin embargo, no funciona.

¿Como puedó resolver esté problema?

Answer 1

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

Answer 2

Deberías 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;)

Answer 3

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

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

No necesita incluir ningún tipo de @ font-face, etc. la respuesta que obtiene de la API de Google está lista y le permite usar familias de fuentes de la manera habitual.

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

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

Lo que hice en realidad fue app.css una app.css que importó una fonts.css con algunas importaciones de fuentes. Simplemente para la organización (ahora sé dónde están todas mis fuentes). Lo importante para 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 cual es mejor importar fuentes en la parte superior de su archivo principal (no olvide verificar su archivo CSS incluido final para verificar si tiene problemas).

Hay algunas opciones para pasar la API de fuentes de Google para que sea más eficiente al cargar fuentes, etc. Consulte la documentación oficial: https://developers.google.com/fonts/docs/getting_started

Editar, nota: si se trata de una aplicación "fuera de línea", es posible que deba descargar las fuentes y cargarlas a través de Webpack.

Answer 4

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

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

// Somewhere in your React tree:

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

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

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

Answer 5

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

El uso es simple:

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

Entonces puedes usar el apellido en tu CSS:

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

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

Answer 6

Si está utilizando el entorno Crear aplicación React simplemente agregue la regla @import a index.css como tal:

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

Importe index.css en su aplicación principal React:

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

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

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

Answer 7

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

use @import url(''within single quotes''); Me gusta esto

no @import url("within double quotes"); Me gusta esto

Answer 8

Podría ser la etiqueta de enlace de cierre automático 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; }

Answer 9

¿Fuentes de Google en React.js?

Abra su hoja de estilo, es decir, app.css, style.css (qué nombre tiene), no importa, solo abra la hoja de estilo y pegue este código

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

y no olvides cambiar la URL de tu fuente que quieras, de lo contrario funciona bien

y usa esto como:

import ''./index.css''