Como adicionar fontes novas em um site com fontsquirrel – css

Quanto escolhemos as fontes para uma página web muitas vezes esbarramos na limitação da quantidade de fontes. Uma solução bem interessante é baixar as fontes no site fontsquirrel e vincular a nossa página. Nesse primeiro tutorial vou explorar essa possibilidade, em breve, irei postar outro utilizando outra opção interessante, o Google Web Fonts. Vamos ao trabalho, sem mais delongas.

Na página inicial do site vamos clicar em @fonte-face Kits.

fontsquirrel1

Para o exemplo utilizei a fonte Calligraffiti por ser bem diferente das tradicionais, mas não esqueça que essa fonte não é indicada para textos longos. Clique em “Get Kit”.

fontsquirrel2

Ao descompactar a pasta você terá os seguintes arquivos, vamos abrir o stylesheet.css.

fontsquirrel3

Agora copie esse código da stylesheet.css que iremos colar na nossa folha de estilos. Em outras palavras copiamos o código da folha de estilos da fonte que veio na pasta e colamos na nossa folha de estilos.fontsquirrel4

Essa é a folha de estilos da minha página (note que é bem simples para facilitar a visualização da inserção do código)

fontsquirrel5

Essa é a página html que a folha de estilos acima está formatando.

fontsquirrel6

Agora vamos inserir o código na nossa folha de estilo. Note que  chamo a fonte com @font-face (código que pequei na folha de estilo da fonte) e no body inseri o font-family também. Poderia, e visualmente seria mais interessante, ter usado em um ou alguns elementos. Importante: Não esqueça de colocar o caminho exato dos arquivos, no meu caso mantive o nome da fonte ou seja calligraffiti como nome da pasta, mas normalmente modifico para “fonte”. Se tiver dando algum erro quando você estiver testando provavelmente será a vinculação com a pasta.

fontsquirrel7

Veja a diferença da fonte (clique aqui ou na imagem para ver a página em um servidor web):

fontsquirrel8

Obs.: Qualquer visitante visualizará a fonte, pois ela será baixada para o computador do visitante. Você poderá deletar alguns arquivos da pasta como a licença (melhor ler antes para ver se é livre para uso comercial) e a demo. Preferi não deletar nada para não complicar o tutorial. No caso da página que fiz, o correto seria somente ter inserido no título porque a fonte atrapalha a leitura do texto, mas optei por usar em todo texto por questões didáticas. A página está online e pode ser vista clicando aqui.

Simples não? Agora é sua vez de tentar!

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s