Fontes externas com CSS3 - Exemplos

05/08/2016

0

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

Mais Posts

05/08/2016

Joel Rodrigues

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

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

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

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

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

Aceitar