Ir para o conteúdo principal

Google Fonts

  1. Vá para Google Fonts e escolha a fonte de que você gosta.

  2. Na página da fonte, localize e clique no botão Get font.

1

  1. Clique em Get embed code.

2

  1. Selecione @import.

3

  1. Precisamos copiar duas partes aqui:

4

Parte Um

Para a fonte que escolhi, o código de incorporação fornecido pelo Google se parece com isto:

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

Só precisamos copiar a parte após o ponto de interrogação na URL (destacada em vermelho na imagem acima) e colá-la no campo Google Fonts (Font families) na página de opções do plugin. Neste exemplo, eu só preciso copiar family=Noto+Sans+JP:[email protected]&display=swap.

Parte Dois

Para esta fonte, o código de estilo fornecido pelo Google se parece com isto:

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

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

Só precisamos da parte destacada em vermelho na imagem acima.

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

Às vezes, você precisa preencher alguns valores dentro dos estilos. Por exemplo, para esta fonte, o valor de font-weight é <weight>, o que significa que você precisa fornecer um valor. Esses placeholders geralmente ficam entre <>. Você pode encontrar os valores correspondentes na Mozilla.

Para font-weight, podemos usar normal.

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

Cole isso no campo Google Fonts (CSS properties) na página de opções do plugin.

  1. Conclua a configuração.

5

  1. Retorne à página do vídeo para ver a fonte aplicada. A imagem abaixo mostra Noto Sans Japanese e Noto Serif Japanese em uso.

6