Fontes externas com CSS3 - Exemplos
E aí, galera. Recentemente publiquei um artigo ensinado a usar o recurso @font-face das CSS3, que serve para importar fontes textuais externas, a fim de poder utilizá-las em qualquer browser, independente de ela estar ou não instalada no cliente: CSS3: Web Fonts.
Abri esse tópico para que possamos compartilhar outros exemplos de uso desse recurso, outras alternativas, experiências, etc. Quem quiser colaborar, é só deixar sua contribuição abaixo. ;)
Valeu!
Abri esse tópico para que possamos compartilhar outros exemplos de uso desse recurso, outras alternativas, experiências, etc. Quem quiser colaborar, é só deixar sua contribuição abaixo. ;)
Valeu!
Joel Rodrigues
Curtidas 31
Melhor post
Joel Rodrigues
05/08/2016
Uma alternativa ao uso do @font-face é importar fontes de um repositório como o Google Fonts, que por trás também usa o @font-face.
A sintaxe básica de uso é a seguinte (no arquivo CSS):
A partir daí já podemos usar a fonte importada:
A sintaxe básica de uso é a seguinte (no arquivo CSS):
@import url(https://fonts.googleapis.com/css?family=Lato:400,100,300);
A partir daí já podemos usar a fonte importada:
* {
font-family: Lato
}GOSTEI 39
Mais Respostas
Joel Rodrigues
05/08/2016
Para ficar mais claro, fiz um exemplo de uso: https://jsfiddle.net/xby6a73r/.
GOSTEI 16
Diego Silva
05/08/2016
Show de bola! Eu por exemplo costumo usar as fontes do google!
GOSTEI 0
Diego Silva
05/08/2016
maneira esse exemplo
GOSTEI 0
Diego Silva
05/08/2016
Respondendo o tópico
GOSTEI 0
Adriana Muniz
05/08/2016
Vale a pena conferir que já há bibliotecas no JS que corrige muitas questoes relativas a falta de suporte ao arquivo fonte.
https://medium.com/@eduagni/html5-css3-suporte-dos-navegadores-e-t%C3%A9cnicas-de-compatibilidade-186d6c876434
https://medium.com/@eduagni/html5-css3-suporte-dos-navegadores-e-t%C3%A9cnicas-de-compatibilidade-186d6c876434
GOSTEI 3
Adriana Muniz
05/08/2016
Uma alternativa ao uso do @font-face é importar fontes de um repositório como o Google Fonts, que por trás também usa o @font-face.
A sintaxe básica de uso é a seguinte (no arquivo CSS):
A partir daí já podemos usar a fonte importada:
A sintaxe básica de uso é a seguinte (no arquivo CSS):
@import url(https://fonts.googleapis.com/css?family=Lato:400,100,300);
A partir daí já podemos usar a fonte importada:
* {
font-family: Lato
}GOSTEI 10