Fuentes en React

Presentaremos cómo instalar fuentes y usar fuentes en React.

Fuentes en React

Las fuentes son la parte más importante de un sitio web. Hay diferentes formas de instalar fuentes en la aplicación de React.

La forma más común es importando una fuente. Podemos importar una fuente usando npm o yarn en el símbolo del sistema. Instalemos Quicksand como ejemplo.

# react CLI
yarn add typeface-quicksand

o

# react
npm install typeface-quicksand --save

Después de instalarlo, debemos importarlo al archivo index.tsx.

# react
import 'typeface-quicksand';

Ahora, podemos usarlo en el archivo style.css.

# react
h1,
p {
  font-family: Quicksand;
}

Producción:

Otra forma de instalar fuentes en React es agregando enlaces directamente en el archivo index.html o style.css. Instalemos la fuente Lato como ejemplo.

# react
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">

O,

# react
<style>
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
</style>

Importemos la fuente Lato y cambiemos el estilo de encabezado y párrafo.

# react
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
h1,
p {
  font-family: Lato;
}

Producción:

Otra forma de instalar fuentes en React es descargándolas y agregándolas en nuestro código fuente.

Podemos descargar fuentes fácilmente desde fonts.google.com y moverlas al directorio fonts dentro de nuestro directorio src.

Ahora, en style.css, agrega fuentes usando @font-face.

# react
@font-face {
  font-family: 'Lato';
  src: local('Lato'), url(./fonts/Lato-Regular.otf) format('opentype');
}

Para el formato ttf, tenemos que mencionar format('truetype'), y para el formato woff, tenemos que mencionar format('woff').

Ahora, podemos diseñar fácilmente usando esta fuente.

# react
h1,
p {
  font-family: Lato;
}

Producción:

Otro método es usando el paquete web-font-loader. Podemos instalar fácilmente un paquete web-font-loader usando npm o yarn.

# react
yarn add webfontloader

O,

# react
npm install webfontloader --save

Ahora, en index.tsx, podemos importar y especificar la fuente que necesitamos.

# react
import WebFont from 'webfontloader';

WebFont.load({
   google: {
     families: ['Lato:300,400,700', 'sans-serif']
   }
});

Así que ahora, aprendimos cuatro formas diferentes de instalar y usar fuentes en React.