Solucionado
Boa tarde. Gostaria de tirar uma dúvida. Na aula deu para entender que a fonte utilizada nas letras veio do site da microsoft. O que acontece se esse site ficar fora do ar? O index.html ficará com as fontes todas bagunçadas? Seria interessante possuir uma segunda opção importando fontes pessoais direto no html caso isso ocorra. Grato.
Olá, Joilson, tudo bem?
Sua dúvida é muito válida! Quando você utiliza fontes externas, como as do Google Fonts ou de outros serviços online, se o serviço ficar fora do ar, o navegador não vai conseguir carregar a fonte específica, e isso pode causar um fallback, ou seja, o navegador vai utilizar uma fonte padrão que esteja disponível no sistema do usuário.
Para evitar esse tipo de problema, uma boa prática é definir uma fonte de fallback no CSS. Assim, se a fonte principal não for carregada, o navegador usará a próxima da lista. Um exemplo disso seria:
body {
font-family: 'Roboto', Arial, sans-serif;
}
Aqui, se a fonte 'Roboto' (que vem do Google Fonts) não carregar, o navegador vai usar 'Arial'. Se 'Arial' também não estiver disponível, ele usará qualquer fonte sans-serif instalada no sistema.
Outra opção seria hospedar suas próprias fontes localmente. Nesse caso, você baixa o arquivo da fonte e utiliza o CSS para importar diretamente do seu projeto:
@font-face {
font-family: 'MinhaFonte';
src: url('fonts/minha-fonte.woff2') format('woff2');
}
body {
font-family: 'MinhaFonte', Arial, sans-serif;
}
Assim, você garante que a fonte estará disponível sempre, independentemente de problemas externos.
Espero ter ajudado!
Siga firme nos seus estudos e conte com o fórum sempre que precisar!
Abraços :)
Boa tarde Mike,
Muito obrigado pelo retorno. Deu para entender claramente sua explicação.
Acho que é bem válido na maioria dos projetos profissionais a implementação de fontes locais porque isso permite uma maior compatibilidade e confirmação que o usuário irá acessar o index.html sem erros.
Uma padronização padrão de fontes títulos, fontes parágrafos e fontes comentários é bem válida por padrão em todos htmls mesmo que isso ocasione um processamento maior da máquina servidor.
Uma outra dúvida seria se o navegador do usuário irá interpretar e importar qualquer fonte com essa extensão woff2, independente do SO(Linux, Windows, Android, etc) ou navegador(Firefox, Chrome, Brave, Edge, dentre outros) utilizado.
Existe algum site que possa baixar essas fontes gratuitas?
Grato.
Olá, Joilson, como vai?
Que bom que sua dúvida anterior foi esclarecida! Sobre sua nova pergunta, o formato de fonte .woff2 é amplamente suportado pela maioria dos navegadores e sistemas operacionais modernos. Isso faz do .woff2 uma escolha excelente para garantir compatibilidade.
Em relação a fontes gratuitas, você pode encontrar uma grande variedade no Google Fonts, que oferece opções gratuitas para uso pessoal e comercial. Outra boa alternativa é o site Font Squirrel, que também disponibiliza fontes de alta qualidade, sendo muitas delas gratuitas e prontas para download em diferentes formatos, incluindo .woff2.
Espero ter ajudado.
Qualquer outra dúvida, estou a disposição!