Fórum Fontes externas com CSS3 - Exemplos #559919

05/08/2016

0

Front-end

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!
Joel Rodrigues

Joel Rodrigues

Responder

Post mais votado

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):

@import url(https://fonts.googleapis.com/css?family=Lato:400,100,300);


A partir daí já podemos usar a fonte importada:

* {
   font-family: Lato
}

Joel Rodrigues

Joel Rodrigues
Responder

Gostei + 39

Mais Posts

05/08/2016

Joel Rodrigues

Para ficar mais claro, fiz um exemplo de uso: https://jsfiddle.net/xby6a73r/.
Responder

Gostei + 16

15/03/2021

Adriana Muniz

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
Responder

Gostei + 3

15/03/2021

Adriana Muniz

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):

@import url(https://fonts.googleapis.com/css?family=Lato:400,100,300);


A partir daí já podemos usar a fonte importada:

* {
   font-family: Lato
}
Responder

Gostei + 10

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar