Como instalar uma fonte a partir do Google Fonts

Este tutorial mostra como instalar uma família de fonte a partir do Google Fonts, uma biblioteca Google com mais de 800 fontes livres diferenciadas que disponibiliza um diretório web interativo para navegação e API’s para utilizar as fontes de forma conveniente.

1. Primeiramente acesse o site do Google Fonts e localize e clique na fonte desejada. Neste exemplo usamos a fonte “Roboto”:

2. Será exibida uma tela com os estilos disponíveis da fonte selecionada (itálico, negrito etc.). Selecione todos os estilos que serão utilizados na sua loja clicando ao lado de cada um:

3. Será exibida uma guia com as tags HTML e regra CSS correspondentes e arquivos disponíveis. Clique no botão Download all para fazer o download dos arquivos da fonte:

🚧

Importante

Será necessário converter os arquivos nas extensões woff e woff2. Clique aqui para convertê-los.

4. Após a seleção e download das fontes, acesse Aparência > Gerenciador de arquivos no painel administrativo. Caso não exista, será necessário criar uma pasta com o nome da fonte para armazená-los, dentro de [tema_da_loja > CSS > Fontes > nome_da_fonte]. Veja o exemplo abaixo:

Será exibido um menu de contexto. Selecione a opção Nova pasta:

Preencha o campo com o nome da pasta (que deve ser o mesmo da fonte) e clique em Criar:

Clique com o botão direito sobre a pasta recém criada e selecione a opção Upload:

5. Será necessário criar uma regra de CSS para incorporar os arquivos na loja. No exemplo abaixo utilizamos o arquivo ajustes.css, mas é possível utilizar outro recurso. Como criar recursos

@font-face {
  font-family: Roboto;
  src: url("./Fontes/Roboto/Roboto-Regular.ttf") format("ttf"),
    url("./Fontes/Roboto/Roboto-Regular.woff2") format("woff2"),
    url("./Fontes/Roboto/Roboto-Regular.woff") format("woff");
  font-weight: normal;
}

@font-face {
  font-family: Roboto-Medium;
  src: url("./Fontes/Roboto/Roboto-Medium.ttf") format("ttf"),
    url("./Fontes/Roboto/Roboto-Medium.woff2") format("woff2"),
    url("./Fontes/Roboto/Roboto-Medium.woff") format("woff");
  font-weight: normal;
}

@font-face {
  font-family: Roboto-Bold;
  src: url("./Fontes/Roboto/Roboto-Bold.ttf") format("ttf"),
    url("./Fontes/Roboto/Roboto-Bold.woff2") format("woff2"),
    url("./Fontes/Roboto/Roboto-Bold.woff") format("woff");
  font-weight: normal;
}

body,input,button{
    font-family:'Roboto'!important;
}

❗️

Importante:

O exemplo de código acima foi criado para a fonte Roboto, e não funcionará com famílias de fontes diferentes.