1
resposta

[Dúvida] Fonte está diferente após fazer deploy para Github Pages

Oi.

Acredito que a fonte Monteserrat não está sendo carregada no site, pois está aparecendo diferente após publicação no Github Pages.

Ainda não fiz o formulário da página de contato, mas todo o resto está feito.

# 	**Endereços do meu repositório e do meu github pages:**
    
    https://github.com/csbarbado/jornada_viagens
    
    https://csbarbado.github.io/jornada_viagens/
    

# **versão que vejo executando pelo VS Code (Live Server) **

Insira aqui a descrição dessa imagem para ajudar na acessibilidade -

versão que vejo do site publicado pelo Github Pages

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta

Oii, Cristiane.

A pasta no projeto se chama Fonts (F maiúsculo), mas no CSS está referenciado como fonts (f minúsculo):

src: url(../fonts/Montserrat-VariableFont_wght.ttf);

No Windows isso funciona porque o sistema de arquivos é case-insensitive. Já o GitHub Pages roda em Linux, que é case-sensitive — então fonts/ e Fonts/ são pastas diferentes.

A correção é simples: atualizar o caminho no CSS para usar F maiúsculo:

@font-face {
  font-family: "Montserrat";
  src: url(../Fonts/Montserrat-VariableFont_wght.ttf);
  font-style: normal;
  font-display: swap;
}

Agora o caminho ../Fonts/Montserrat-VariableFont_wght.ttf vai funcionar tanto localmente quanto no GitHub Pages.

Eu fiz o teste clonando o seu repositório e passei pro GitHub pages também. Código teste no GitHub.

Depois irei deletar esse teste do meu GitHub.

Espero ter te ajudado.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!