Como adicionar fontes e tipos do Font Squirrel ao seu site em 5 etapas f√°ceis

esquilo de fonte

Gra√ßas a sites como o Font Squirrel, voc√™ pode usar qualquer tipo ou estilo de fonte em um site. As op√ß√Ķes costumavam ser limitadas a algumas fontes da web padr√£o que todos tinham que fazer uso. Hoje, existem muito mais op√ß√Ķes dispon√≠veis. Voc√™ n√£o est√° mais restrito a algumas fontes compat√≠veis com a web. Agora, as fontes podem ser baixadas instantaneamente simplesmente acessando um site.

Sites como o Font Squirrel, com acesso a centenas e milhares de itens, s√£o muito populares. Seu gerador de fontes da web torna mais f√°cil do que nunca usar envios de terceiros, bem como cria√ß√Ķes com curadoria.

 

Em vez de usar fontes padrão, como Arial, Calibri e Helvetica Neue, podemos usar a regra CSS @ font-face. Isso nos permite usar qualquer fonte sem ter que instalá-la nos dispositivos dos visitantes. Esta é uma excelente opção que proporciona liberdade de expressão para o designer do site e máxima usabilidade para o usuário.

Leia mais: Como aprender CSS (Smashing Magazine)

Isso tornou extremamente fácil adicionar o Font Squirrel e qualquer outro tipo de letra que você escolher ao seu site.

Neste tutorial, mostraremos como usar o Font Squirrel em seu site. Você pode usar o mesmo conceito para adicionar qualquer tipo de letra ao seu site, incluindo FontAwesome. 

Adicionar Font Squirrel ao seu site

1. Encontre a fonte FontSquirrel desejada

  • Visite Esquilo fonte e selecione Localizar para pesquisar a fonte que deseja adicionar.
  • Selecione aquele que voc√™ gostaria de usar em seu site como parte de seu design da web. Voc√™ pode usar as v√°rias categorias para encontrar a fonte que gostaria de usar, encontrar as adi√ß√Ķes mais populares, adicionadas recentemente, quentes ou em alta. Existem milhares para escolher. Selecione aquele que funciona melhor para o projeto em que est√° trabalhando.

 encontrar fontsquirrel fontes

 

2. Baixe o kit Font Squirrel WebFont

  • Depois de selecionar a fonte que deseja usar, clique no bot√£o Kit WebFont no canto superior direito da tela.
  • Clique em Download @ font-face kit.

fontsquirrel download webfont kit

 

fontsquirrel download font face kit

 O download conterá um arquivo zip com vários arquivos, incluindo como usar a fonte da web, quaisquer licenças associadas a este tipo de letra do Font Squirrel e, claro, o próprio arquivo.

 

3. Envie os arquivos do Font Squirrel para o seu site

  • Extraia o arquivo - Ele ser√° extra√≠do para uma pasta com o nome do item escolhido.
  • Carregue TODOS os arquivos para a pasta CSS do seu site. Voc√™ ter√° v√°rios arquivos que precisar√° enviar, incluindo:
  1. fontname-webfont.eot,
  2. fontname-webfont.svg,
  3. fontname-webfont.ttf,
  4. fontname-webfont.woff,
  5. stylesheet.css

 

font Squirrel upload de arquivos

 

4. Adicione o tipo de letra à sua folha de estilo CSS

A etapa final ir√° variar um pouco de acordo com a forma como as fontes s√£o usadas em seu site. Voc√™ encontrar√° suas defini√ß√Ķes de tipo de letra no arquivo CSS. O arquivo deve ser chamado stylesheet.css. Voc√™ deve encontrar o arquivo CSS usado em seu site e adicionar os arquivos Font Squirrel usando o seguinte. Adicione o seguinte ao seu arquivo stylesheet.css, substituindo:

 

@font-face {
    font-family: 'FontName';
    src: url('FontName-webfont..eot');
    src: url('FontName-webfont..eot?#iefix') format('embedded-opentype'),
        url('FontName-webfont.woff') format('woff'),
        url('FontName-webfont.ttf') format('truetype'),
        url('FontName-webfont.svg#FontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

Se você fez o upload das fontes para a pasta TYPES, o código mudará ligeiramente para:

@font-face {
    font-family: 'FontName';
    src: url('types/FontName.eot');
    src: url('types/FontName.eot?#iefix') format('embedded-opentype'),
        url('types/FontName-webfont.woff') format('woff'),
        url('types/FontName-webfont.ttf') format('truetype'),
        url('types/FontName-webfont.svg#FontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

5. Altere as declara√ß√Ķes CSS para usar os itens FontSquirrel adicionados

 

Depois de adicionar as declara√ß√Ķes acima √† folha de estilo, voc√™ precisar√° edit√°-la um pouco mais para usar o tipo de letra. Depois de adicionar o c√≥digo acima, voc√™ precisa editar ainda mais a folha de estilo para usar os novos tipos que adicionou.

Faça isso alterando a família de fontes para o nome da opção que você escolheu. Por exemplo, se você quiser usar o novo tipo com seus cabeçalhos - encontre o CSS do cabeçalho e altere-o de acordo.

 

encontre a família de fontes atual

Atualize a declaração CSS com o nome FontSquirrel que você baixou.

h1,h2,h3,h4,h5,h6 {
    color: #444;
    text-decoration: none;
    font-family: 'FontName', sans-serif;
}

 Claro, você pode usar a família de fontes em qualquer tag CSS de que precisar!

 

Se você seguiu todas as etapas acima corretamente, depois de recarregar a folha de estilo, deverá ter a nova fonte Font Squirrel que acabou de adicionar ao seu site!

Caso contr√°rio, basta abrir as ferramentas de desenvolvedor do seu navegador para verificar se todos os arquivos est√£o sendo acessados ‚Äč‚Äčcorretamente. Caso contr√°rio, verifique novamente seu CSS para ter certeza de que digitou o nome da fonte corretamente.

 

Se você está procurando inspiração para usar uma fonte, aqui estão as 25 fontes mais populares no Font Squirrel no momento.

Montserrat

1. montserrat

Montserrat √© uma fonte urbana moderna dispon√≠vel em v√°rios pesos. Funciona de perto e √† dist√Ęncia e pode funcionar bem na Web.

https://www.fontsquirrel.com/fonts/montserrat

Sans Abertas

2. Sans abertas

O Open Sans dispensa apresenta√ß√Ķes. √Č uma das fontes mais populares do mundo e √© limpa, moderna e flex√≠vel.

https://www.fontsquirrel.com/fonts/open-sans

Roboto

3. Roboto

Roboto é outra fonte da web imensamente popular graças às suas linhas simples, aparência simples e flexibilidade.

https://www.fontsquirrel.com/fonts/roboto

Raleway

4. Raleway

Raleway √© semelhante em apar√™ncia a Roboto, mas tamb√©m √© √ļnico. Outra fonte limpa e leve que funcionaria bem em qualquer situa√ß√£o.

https://www.fontsquirrel.com/fonts/raleway

Lato

5. lato

Lato existe há quase 10 anos graças à sua eficácia, aparência moderna e grande equilíbrio.

https://www.fontsquirrel.com/fonts/lato

Bebas Neue

6. Bebas Neue

Bebas Neue √© uma interpreta√ß√£o da fonte livre Bebas Neue original de Ryoichi Tsunekawa. √Č uma fonte muito atraente e imensamente popular.

https://www.fontsquirrel.com/fonts/bebas-neue

Poppins

7. Poppins

Poppins é uma fonte leve e despreocupada com grande equilíbrio. Também é totalmente moderno, o que significa que pode funcionar em muitos designs.

https://www.fontsquirrel.com/fonts/poppins

Grandes Vibes

8. √ďtimas vibra√ß√Ķes

Great Vibes é uma fonte fluida de estilo manuscrito que ainda é legível em diferentes tamanhos de tela. Isso se presta bem a ser usado em projetos de luxo.

https://www.fontsquirrel.com/fonts/great-vibes

Alex Brush

9. Alex Brush

Alex Brush √© outro script de pincel manuscrito fluente que √© leg√≠vel em diferentes tamanhos de tela. √Č uma abordagem mais descontra√≠da do tema com apelo definitivo.

https://www.fontsquirrel.com/fonts/alex-brush

Areia movediça

10. Areia movediça

Areia movediça é leve e caprichosa e tem uma sensação arejada. Uma mistura de moderno e caprichoso, a fonte pode ser ideal em uma variedade de designs da web.

https://www.fontsquirrel.com/fonts/quicksand

Oswald

11. Oswald

Oswald √© uma fonte mais pesada, mais enf√°tica e com grande legibilidade em diferentes dist√Ęncias. Tamb√©m √© simples e moderno, o que funciona bem.

https://www.fontsquirrel.com/fonts/oswald

Fonte Sans Pro

12. Fonte Sem Pro

Source Sans Pro é uma evolução de uma das primeiras fontes de código aberto da Adobe. Ele foi modificado e aprimorado continuamente, sendo este um dos melhores exemplos.

https://www.fontsquirrel.com/fonts/source-sans-pro

Exposição de Playfair

13. Playfair Display

Playfair Display √© uma fonte mais tradicional com um toque moderno. √Č bem equilibrado e pode funcionar em todos os tipos de situa√ß√Ķes.

https://www.fontsquirrel.com/fonts/playfair-display

milk shake

14. Milkshake

Milkshake é uma fonte mais pesada com um tema americano. Ele foi inicialmente desenhado com um pincel antes de se tornar uma fonte.

https://www.fontsquirrel.com/fonts/milkshake

Script Kaushan

15. Kaushan Script

Kaushan Script tem um elemento asi√°tico que evoca vis√Ķes de Saigon na d√©cada de 1930. √Č uma boa fonte com amplo apelo.

https://www.fontsquirrel.com/fonts/kaushan-script

Chunkfive

16. Chunkfive

Chunkfive √© um nome descritivo para esta fonte chunky. √Č uma fonte em negrito que causa impacto e pode funcionar bem para t√≠tulos ou cabe√ßalhos.

https://www.fontsquirrel.com/fonts/chunkfive

amatic

17. Amatic

Amatic é uma reminiscência da escrita do quadro-negro ou Os Simpsons, mas tem um personagem próprio. Poderia funcionar bem em less sites formais.

https://www.fontsquirrel.com/fonts/amatic

Allura

18. Allura

Allura é outra fonte manuscrita fluida que é muito agradável aos olhos. Uma consideração cuidadosa pode fazer um grande uso dessa fonte.

https://www.fontsquirrel.com/fonts/allura

League Spartan

19. League Spartan

League Spartan é uma fonte objetiva que tem muita presença. Pode funcionar perfeitamente como um título ou em uma frase de chamariz.

https://www.fontsquirrel.com/fonts/league-spartan

Metrópole

20. Metrópolis

Metropolis é uma fonte geométrica moderna que foi obviamente influenciada por algumas das fontes mais populares. Esta é uma ótima interpretação.

https://www.fontsquirrel.com/fonts/metropolis

Pacifico

21. Pacífico

Pacifico √© uma fonte leve e fluida que evoca pensamentos sobre os jeans Pepe e a Am√©rica dos anos 1960. √Č uma fonte eficaz em um ambiente tradicional.

https://www.fontsquirrel.com/fonts/pacifico

Aller

22. Aller

Aller tem um design limpo, leve e moderno, cujo angular a aparência se adapta bem ao design moderno da web.

https://www.fontsquirrel.com/fonts/Aller

Josefin Sans

23. Josefin Sans

Josefin Sans consegue combinar modernidade com herança e pode ser uma fonte muito flexível em uma grande variedade de designs.

https://www.fontsquirrel.com/fonts/josefin-sans

Black Jack

24. Black Jack

Black Jack √© uma fonte fluida com uma apar√™ncia informal. Pode funcionar bem em designs descontra√≠dos, c√īmicos ou relaxados.

https://www.fontsquirrel.com/fonts/blackjack

Lagosta

25. Lagosta

A lagosta tem a aparência de uma marca, talvez na Nova Inglaterra ou em algum lugar à beira-mar. Uma ótima fonte para usar se o design for adequado.

https://www.fontsquirrel.com/fonts/Lobster

PERGUNTAS FREQUENTES

O que é Font Squirrel?

Font Squirrel é um repositório de fontes da web provenientes de criadores de código aberto e gratuitos. Todas as fontes podem ser baixadas e usadas gratuitamente, mesmo comercialmente.

Como faço o download de fontes da Web do Font Squirrel?

Baixar fontes da web do Font Squirrel é fácil. Identifique a fonte que deseja usar, baixe o arquivo que contém a fonte. Faça upload dos arquivos para seu host da web e inclua o nome da fonte em seu stylesheet.css. Em seguida, teste para ter certeza de que a fonte carrega.

A fonte mais popular no momento é Helvetica. De acordo com a Wired, Helvetica é a fonte mais popular do mundo, apesar de ter 62 anos.

Qual é a fonte mais moderna para usar?

Além da Helvetica, as fontes mais modernas para usar de acordo com Lifehack incluem Baskerville, Times, Akzidenz Grotesk, Gotham, Bodoni e Didot.

 

 

Sobre o autor
David Attard
Autor: David AttardSite: https://www.linkedin.com/in/dattard/
David tem trabalhado na ou em torno da ind√ļstria online / digital nos √ļltimos 18 anos. Ele tem vasta experi√™ncia nas ind√ļstrias de software e web design usando WordPress, Joomla e nichos ao seu redor. Como consultor digital, seu foco √© ajudar as empresas a obter uma vantagem competitiva usando uma combina√ß√£o de seu website e plataformas digitais dispon√≠veis hoje.

Mais uma coisa... Voc√™ sabia que as pessoas que compartilham coisas √ļteis como esta postagem tamb√©m parecem FANT√ĀSTICAS? ;-)
. deixe um √ļtil comente com suas ideias, depois compartilhe com seu (s) grupo (s) do Facebook, que considerariam isso √ļtil e vamos colher os benef√≠cios juntos. Obrigado por compartilhar e ser legal!

Divulga√ß√£o: Esta p√°gina pode conter links para sites externos de produtos que amamos e recomendamos de todo o cora√ß√£o. Se voc√™ comprar produtos que sugerimos, podemos receber uma taxa de refer√™ncia. Essas taxas n√£o influenciam nossas recomenda√ß√Ķes e n√£o aceitamos pagamentos por an√°lises positivas.

Autor (es) em destaque em:  Logotipo da revista Inc   Logotipo do Sitepoint   Logotipo do CSS Tricks    logotipo do webdesignerdepot   Logotipo WPMU DEV   e muitos mais ...