Ir al contenido principal

Google Fonts

  1. Ve a Google Fonts y elige la fuente que te guste.

  2. En la página de la fuente, busca y haz clic en el botón Get font.

1

  1. Haz clic en Get embed code.

2

  1. Selecciona @import.

3

  1. Necesitamos copiar dos partes aquí:

4

Parte Uno

Para la fuente que elegí, el código de inserción proporcionado por Google se ve así:

<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:[email protected]&display=swap');
</style>

Solo necesitamos copiar la parte después del signo de interrogación en la URL (resaltada en rojo en la imagen de arriba) y pegarla en el campo Google Fonts (Font families) en la página de opciones del plugin. En este ejemplo, solo necesito copiar family=Noto+Sans+JP:[email protected]&display=swap.

Parte Dos

Para esta fuente, el código de estilo proporcionado por Google se ve así:

// <uniquifier>: Usa un nombre de clase único y descriptivo
// <weight>: Usa un valor de 100 a 900

.noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

Solo necesitamos la parte resaltada en rojo en la imagen de arriba.

  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;

A veces necesitas completar algunos valores dentro de los estilos. Por ejemplo, para esta fuente, el valor de font-weight es <weight>, lo que significa que necesitas proporcionar un valor. Estos marcadores de posición normalmente están entre <>. Puedes encontrar los valores correspondientes en Mozilla.

Para font-weight, podemos usar normal.

  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;

Pega esto en el campo Google Fonts (CSS properties) en la página de opciones del plugin.

  1. Completa la configuración.

5

  1. Vuelve a la página del video para ver la fuente aplicada. La imagen de abajo muestra Noto Sans Japanese y Noto Serif Japanese en uso.

6