Entrar Ainda não tem acesso?
1
resposta

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

Referente ao curso HTML e CSS: responsividade em layouts, no capítulo Desafio avançando o projeto e atividade Conclusão

por Cristiane Barbado
| 84.9k xp | 5 posts

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
por Lorena Garcia
| 14256.7k xp | 21386 posts
Instrutor

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!

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA