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.
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.
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:
- fontname-webfont.eot,
- fontname-webfont.svg,
- fontname-webfont.ttf,
- fontname-webfont.woff,
- folha de estilo.css
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.
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.
25 fontes mais populares no Font Squirrel
Se você está procurando inspiração para usar uma fonte, aqui estão as 25 fontes mais populares no Font Squirrel no momento.
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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.
Qual é a fonte mais popular no momento?
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.
. 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.
e muitos mais ...