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 APIs para utilizar as fontes de forma conveniente.
- Primeiramente acesse o site do Google Fonts e localize e clique na fonte desejada. Neste exemplo usamos a fonte “Roboto”:


- 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:


- 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.
- 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:




- 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.
Updated about 2 months ago
Did this page help you?