Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

rafaelcrvs

Importar fonts do Google para CSS

Recommended Posts

Olá pessoal,

 

Ultimamente tenho tentado importar as fontes do google para meu site com o @import, ou seja, coloco o @import no topo do meu arquivo CSS e depois tento usá-la mas, a fonte não está sendo encontrada.

 

Antigamente eu fazia exatamente isso e funcionava.

 

Alguém pode me ajudar com essa importação de fonte?

 

Att,

Rafael

Compartilhar este post


Link para o post
Compartilhar em outros sites

Digamos que eu queira utilizar a fonte "Open Sans".

 

Posso incluir a tag link gerada pelo próprio google fonts no cabeçalho (HEAD) da minha página:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700''>http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>

Ou acessando a url contida no atributo href obter a diretiva fonte-face:

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTa-j2U0lmluP9RWlSytm3ho.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

Também usando o import gerado pelo próprio google fonts:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);

E depois aplicar no CSS através da propriedade font-family:

font-family: 'Open Sans', sans-serif;

Exemplo (usando import): http://jsbin.com/nisahamake/1/edit?html,css,output

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá Emet,

 

Veja como está no CSS: http://screencast.com/t/ObjxGX8Ole

 

Após subir o arquivo para o FTP, a fonte não está pegando quando testo pelo firebug. Não sei o que estou fazendo de errado.

 

 

***Edit**

 

Após inserir o @import no CSS e ainda setar a fonte aonde eu queria, funcionou.

 

Eu apenas estava colocando o @import mas estava deixando pra editar o CSS no próprio navegador (firebug), no qual não está funcionando.

 

Obrigado meu caro.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.