ūüźŅÔłŹ Font Squirrel - 25 fontes populares + como adicionar a um site [5 etapas]

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 a 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.

kit fontsquirrel download webfont

 

Fontsquirrel download kit de rosto de fonte

 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. folha de estilo.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 folha de estilo.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.¬†

Confira como fazer isso como vídeo do YouTube e como mudar a fonte em qualquer tema do WordPress.

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. Pipocas

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 Pincel

9. Alex Pincel

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. Exibição da Playfair

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. Milk-shake

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. Roteiro Kaushan

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

pedaço cinco

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. Am√°tico

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

Liga Espartana

19. Liga Espartana

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. BlackJack

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 o Lifehack incluem Baskerville, Times, Akzidenz Grotesk, Gotham, Bodoni e Didot.

Como usar o esquilo da fonte?

Depois de baixar o tipo de fonte que deseja usar, voc√™ pode carreg√°-lo em seu site e criar o CSS com o tipo de fonte conforme as instru√ß√Ķes acima para incluir esse tipo de letra em seu site.

Sobre o autor
David Attard
Autor: David AttardWebsite: 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 ...