A fonte do seu site aparece errada em outros dispositivos?

Oi gente, tudo bem com vocês? Hoje vai ser dia de aulinha escrita...rsrs Se preparem para o textão... brinks...rs Vou tentar ser breve...

Bom, se você é iniciante em fazer sites, talvez já enfrentou esse problema... E talvez nem tenha percebido isso... O que geralmente acontece é que usamos todas as fontes que temos em nossos computadores durante a produção do layout para o site... Por exemplo eu desenho os meus layouts no photoshop... Como todo bom editor de imagem eu tenho um grande acervo de fontes, e às vezes fico uma meia hora no photoshop só trocando as fontes pra ver qual vai casar melhor com meu site...

O problema é que nem todo mundo tem as mesmas fontes que eu tenho... E à partir do momento em que você tira a ideia do papel(no caso do photoshop), você cria o css usando a font-family que você escolheu no photoshop... Aí já pode começar seu primeiro problema, algumas fontes se comportam diferente no photoshop e em navegadores, isso pode fazer você ter que mudar sua fonte de novo, mas esse é o menor problema...rs O pior problema vem à seguir...

Depois de montar seu site bonitinho, colocar ele no ar, pelo seu pc ele fica perfeito... Porém quando você acessa por outro pc ou pelo celular, as fontes nitidamente não são as mesmas que você escolheu, muitas vezes prejudicando até posições de objetos do seu layout...

Isso acontece porque essa fonte que você escolheu, não está instalada no outro dispositivo(pc, celular, enfim), com isso o navegador escolhe uma outra fonte, geralmente é arial, ou times, enfim, o que importa é que ele muda por uma outra fonte que ele tem...

Pra corrigir isso você tem duas alternativas.

A difícil, personalizada (e que pode ser ilegal)

A primeira é colocar a fonte no seu servidor, e criar no css um @font-face, isso nada mais é do que criar uma nova fonte no seu documento de estilos... É bem simples fazer isso, veja o código abaixo:

@font-face {
    font-family: 'minha fonte';
    src: url(sansation_light.woff);
}

Nesse código temos o nome da fonte em font-family, e na sequência temos o url do arquivo da fonte... Segundo o site https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp a extensão de fonte mais reconhecida é a WOFF, então tente achar a sua fonte nesse formato... As que tenho geralmente são TTF, que também são bem aceitas segundo esse site... Inclusive se você tiver dúvidas sobre como colocar essas fontes "personalizadas" esse site explica exatamente sobre esse código...

O problema de colocar essas fontes é que muitas vezes ao baixar você não reparou que está baixando uma versão apenas de teste, ou seja pra usar sem fins comerciais, então se você colocar em seu site, pode acabar tendo problemas por não pagar direitos autorais... Claro que você também pode acessar sites que vendem os direitos autorais dessas fontes que você baixou só o teste, mas o que é mais praticado é a opção à seguir...

Google Fonts a opção gratuita e fácil de usar

A prática mais comum atualmente é utilizar fontes gratuitas do google fonts.
Contando com um imenso banco de fontes pra você escolher, pelo google fonts você consegue gerar um código que é só você colar no cabeçalho da sua página... Abaixo você verá um código de exemplo:

<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet"> 

Se você é organizado o suficiente pra criar vários arquivos css em vez de colocar todo seu bloco dentro de uma tag de <style> apenas, já deve conhecer essa tag...rs Ela serve pra você aplicar um estilo na sua página, porém carregando ele de um arquivo... Que nesse caso é um arquivo do google mesmo...

A vantagem de se usar as fontes do google fonts é que elas geralmente se comportam melhor nos navegadores, ou seja, a diferença que havia quando você usava no photoshop e depois passava pro navegador será menor, de um navegador pro outro é a mesma coisa... Elas são mais confiáveis... Além de não te causarem aqueles problemas de direitos autorais citados anteriormente...

O problema é que se você já fez seu site com outras fontes e tiver que procurar fontes parecidas no google, vai dar bastante trabalho agora...rsrs Eu sei porque é exatamente isso que eu estou fazendo no momento...rsrs Tentando encontrar uma fonte parecida com a que eu estava utilizando, mas tá complicado... Acaba que quando acontece esse tipo de situação a gente tem que acabar mudando o site mesmo, porque se a gente não tem a fonte na extensão pra rodar em todos navegadores, e uma fonte errada prejudica nosso layout, é melhor trocá-la mesmo...

Considerações finais

Bom, se tem uma dica que eu posso te dar ao fim desse post de hoje é pra você ir pro google fonts baixar fontes de lá...rs E talvez seja até bom você excluir algumas fontes que você tem no seu pc pra não acabar utilizando novamente em seus sites...kkk Ou então prestar atenção quando for fazer seus trabalhos, sempre que for usar uma fonte que mais tarde não será transformada em imagem, você deve verificar se ela está disponível no google, se não estiver, melhor trocar enquanto ainda está projetando... xD

E não se preocupem, porque pela minha pesquisa em busca da fonte parecida com a minha, já vi muita fonte bem mais legal que a minha lá no google, pena que não serviram, porque a minha tem um tamanho muito específico, se pá que na verdade a minha tem tamanho fora dos padrões na verdade...kkk E como falei, o google fonts tem a vantagem de ter fontes melhores, provavelmente eles tem um padrão que deve ser seguido...

Bom galera, por hoje é isso, espero que vocês tenham gostado do post de hoje e que tenham entendido como podem solucionar o problema de vocês... Qualquer dúvida vocês podem deixar comentários que nesse tema eu acho que poderei ajudar... xD

Valeu!