O caminho a seguir é usar a declaração CSS @ font-face, que permite aos autores especificar fontes on-line para exibir texto em suas páginas da web. Ao permitir que os autores forneçam suas próprias fontes, o @ font-face elimina a necessidade de depender do número limitado de fontes que os usuários instalaram em seus computadores.
Veja a tabela a seguir:
Como você pode ver, existem vários formatos que você precisa conhecer principalmente devido à compatibilidade entre navegadores. O cenário em dispositivos móveis não é muito diferente.
Soluções:
1 - Compatibilidade total com o navegador
Este é o método com o suporte mais profundo possível no momento:
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
2 - A maioria do navegador
No entanto, as coisas estão mudando bastante para WOFF , então você provavelmente pode se safar:
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
3 - Apenas os navegadores mais recentes
Ou mesmo apenas WOFF.
Você o usa assim:
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
Referências e leituras adicionais:
Isso é principalmente o que você precisa saber sobre a implementação desse recurso. Se você quiser pesquisar mais sobre o assunto, incentivarei a dar uma olhada nos seguintes recursos. A maior parte do que eu coloquei aqui é extraída do seguinte
@font-face
tornou-se muito mais abrangente e é recomendada para uso geral. Você só precisa estar ciente de que o IE requer fontes em um formato diferente de outros navegadores. Veja stackoverflow.com/questions/2219916/is-font-face-usable-now