Como guiar o uso de fontes do Google com o Google e plugins!

Se você é um designer, é mais provável que considere a tipografia como a base de qualquer design de site. Não apenas selecionando as fontes, mas também fornecendo uma vantagem para a legibilidade das páginas da web.

O que é tipografia?
A tipografia trata de selecionar o comprimento da linha, tamanho do ponto, espaçamento entre linhas, tipos de letra e ajustar os espaços entre os grupos de letras.

Por que o Google Fonts é uma escolha clara?
Houve momentos em que a internet tinha fontes padrão que aborreciam qualquer um que as visse, mas com o passar do tempo, os web designers e desenvolvedores foram forçados a limitar suas opções de fontes de texto ao vivo e projetar as fontes que são compatíveis com o maior número de usuários ao longo a Internet. Eles vieram com CSS3. Typekit o iniciou.

O Typekit desenvolveu algumas das fontes atraentes que ajudaram os designers a selecionar fontes atraentes e fáceis de usar para suas páginas da Web, mas o único problema em usar o Typekit foi o custo que eles cobram de seus usuários.

O preço era de US$ 49 e caso um designer quisesse desenvolver dois sites, ele teria que pagar US$ 99 apenas para usar as fontes na página da web. Obrigado ao Google, que veio com seus designs de fontes brilhantes e o ofereceu gratuitamente.

É bastante óbvio que você não recebe de graça o que pode obter com dinheiro, mas acredite, o Google Web Fonts foi, no entanto, do que o oferecido pelo Typekit. Obviamente, as fontes da Web do Google são melhores quando você não gosta de gastar muito em fontes, pois sabe que construir um site inteiro custa muito caro.

Fontes do Google e sua personalização:
Atualmente, existem mais de 647 fontes de famílias de fontes separadas na biblioteca do Google. Ao selecionar uma fonte para o conteúdo do seu site, é imperativo visualizá-la de maneira semelhante à forma como você implementará essa fonte. Algumas fontes parecem perfeitas para o conteúdo do corpo, mas terríveis como cabeçalho.

Felizmente, o Google Web Fonts permite que você personalize sua visualização para corresponder ao seu caso de uso. Você pode inserir um texto de visualização personalizado e alterar o tamanho da visualização conforme sua preferência. É importante pré-visualizar qualquer cabeçalho ou corpo de texto que você vai usar na visualização de parágrafo e se você tiver muito corpo de texto, não use muitas fontes personalizadas.

Afunilando a fonte certa!
Como estamos cientes de mais de seiscentas famílias de fontes para filtrar, fica difícil filtrar e escolher a correta simplesmente percorrendo-as uma a uma. Portanto, use as etapas abaixo para aprimorar exatamente o que você precisa para o seu site:

• Dê uma olhada rápida nas fontes que foram atualizadas recentemente pelo Google. As chances são de que você obtenha a fonte de tendências e livre de bugs sem ter que procurar o resto das fontes. Além disso, veja as fontes usadas pela maioria dos designers e desenvolvedores. Isso permitirá que você conheça fontes versáteis que você pode usar em vários estilos e larguras.
• Se você conhece o tipo de letra do seu site, as características e o estilo das fontes podem melhorar seus resultados, como se você deseja uma fonte manuscrita, desative todos os outros tipos de resultados.
• O Google permite refinar ainda mais a pesquisa de fontes adicionando espessura, inclinação e largura do caractere como opções de filtragem. Não é um recurso legal para obter a melhor fonte para o seu site?

Selecionando as fontes
O Google tem vários métodos para escolher e implementar as fontes de acordo com as necessidades do proprietário do site. Não há nada certo ou errado aqui. O que for melhor para você, você vai conseguir. Ele suporta três botões para ajudá-lo a escolher a fonte certa:

• Uso rápido: para dar uma olhada rapidamente na fonte que você gosta.
• Pop out: Para saber mais sobre a fonte que você gosta, ou seja, sua funcionalidade e usos.
• Coleção: Se você quiser usar mais de duas fontes, Coleção é o botão que você precisa clicar. Ele adicionará todas as fontes que você gosta em uma única página.

Como usar as fontes do Google?
Depois de selecionar as fontes que você gostaria de usar em sua página da web, você pode clicar na guia "Usar" para vê-las em ação. Agora, quando você tiver certeza sobre a fonte, tudo o que você precisa é copiar e colar algum código em sua página da web. Você terá três opções para escolher:

Padrão:
É um link de folha de estilo padrão. Você precisa colocá-lo na parte principal do seu arquivo HTML, economizando assim a etapa de adicionar a regra @import, pois você está adicionando significativamente em uma folha de estilo que já a incluiu. Exemplo:

CSS:
Use a regra CSS @import caso você não queira vincular à folha de estilo gerada automaticamente em seu cabeçalho. Use o código abaixo para integrar as fontes em seu CSS:

font-family: 'Henry Pigeous', serif;
font-family: 'Diplomatic'. cursive;

JavaScript
Google e Typekit, ambos desenvolveram este código aqui como parte do carregador WebFont para dar aos usuários mais controle sobre o carregamento de fontes.

Pegue um trecho HTML e coloque-o próximo ao cabeçalho HTML como:

Título da página

Vá para o CSS e siga isto:

h1 {
font: 400 45px/0.5 'Diplomatic', Arial, sans-serif;
}
p {
font: 400 14px/1.5 'Henry Pegasus', Times, serif;
}

Com a ajuda de plugins!
Existem alguns plugins disponíveis que oferecem integração perfeita com o Google Font. O uso de plug-ins tem suas limitações, como um plug-in não saberá procurar um texto específico sem personalizar ainda mais com a ajuda de HTML ou CSS. Mas ainda assim, aqui estão alguns plugins para incluir fontes do Google em seu site.

1. Plug-in de fontes

É uma maneira fácil e eficaz de inserir fontes do Google em seu site com apenas alguns cliques. Você pode usar sua folha de estilo ou usar o estilo CSS; ambos trabalharão para adaptá-los ao seu tema. Você pode fazer isso na área de administração ou na folha de estilo do seu site. Fonts Plugin é tudo o que você precisa para o seu site, de forma rápida e eficiente.

2. Fontes fáceis do Google

Com o plug-in Easy Google Fonts, você não precisa mexer em nenhum código para obter as fontes em seu site. Desde escolher a otimizar e dar cores exclusivas ao vivo até a visualização, tudo com fontes pode ser feito usando o Easy Google Fonts.

3. TK Google Fonts

O TK Google Fonts adicionará todas as 291 fontes do Google Web ao painel do editor visual quando você estiver desenvolvendo páginas ou postagens. Basta instalá-lo e começar a usá-lo.

Instalando os plugins acima:

• Faça login no administrador do WordPress
• Clique em “Plugins”
• Clique em “Adicionar Novo”
• Digite o nome dos plugins no canto superior direito e clique em “instalar agora”

Para personalizar os plug-ins

• Clique em “Aparência” e depois clique em “Personalizar”.
• Clique em “Visitar Site” e depois em “Personalizar”
• Você notará um novo menu adicionado como "Tipografia"

Implemente o aprendizado!
Esperamos que a leitura do artigo tenha sido uma lição de aprendizado e agora é hora de usar esse conhecimento em seu site. Navegue por várias fontes, plugins para melhorar a tipografia em seus sites. Lembre-se de que, se você estiver personalizando uma fonte, será mais benéfico do que apenas copiar e colar uma fonte. Deixe-nos saber as fontes e métodos que você usa para adicionar tipografia para atrair seu público em seus projetos.

As fontes aprimoram a forma estética de um site e são a base de qualquer design de site. Fontes ou tipografia é tudo sobre como selecionar o comprimento da linha, tamanho do ponto, espaçamento entre linhas, tipos de letra e ajustar os espaços entre as letras do grupo.

Como designer, é sempre bom refinar ainda mais a pesquisa de fontes adicionando espessura, inclinação e largura do caractere como opções de filtragem. Nem todas as fontes ficam bem no corpo e/ou no conteúdo do cabeçalho.

Algumas fontes não parecem boas como cabeçalho e outras não podem ser lidas facilmente no conteúdo do corpo. Portanto, é aconselhável visualizar a fonte selecionada de maneira semelhante à forma como você a implementará para poder testar sua legibilidade.

Longe vão os dias em que a internet costumava ter as mesmas fontes padrão chatas. Tecnologia avançada e web designers e desenvolvedores foram forçados a criar fontes compatíveis com o maior número de usuários na internet.

Eles vieram com CSS3. O Typekit o iniciou e desenvolveu algumas das fontes atraentes e atraentes para os web designers usarem. Mas, eles eram muito caros. Felizmente, o Google veio em socorro e ofereceu designs de fontes brilhantes e fáceis de usar gratuitamente.

Afunilando a fonte certa!

Atualmente, o número de fontes na biblioteca do Google é de 647, dificultando a filtragem e a escolha da fonte certa. No entanto, com estas 3 etapas, você pode obter exatamente o que precisa para o seu site:

• Dê uma olhada nas fontes atualizadas recentemente no google e obtenha uma fonte de tendências e livre de bugs. Além disso, procure fontes usadas pela maioria dos designers para saber mais sobre a versatilidade das fontes que você pode usar em vários estilos e larguras.
• Conheça o tipo de letra do seu site, as características e o estilo das fontes para melhorar seus resultados.
• Refine sua pesquisa de fontes adicionando espessura, inclinação e largura do caractere como opção de filtragem.

Selecionando fontes

Dependendo de suas necessidades, o Google tem vários métodos para ajudá-lo a selecionar uma fonte. Para escolher a fonte certa, considere:

Acesso rápido-Para dar uma olhada rapidamente na fonte que você gosta

Pop Out- Para saber mais sobre a fonte, ou seja, funcionalidade e usos

Coleção-Se você quiser usar mais de duas fontes, clique neste botão. Ele adicionará todas as fontes que você gosta em uma única página.

Como usar as fontes do Google

Depois de selecionar sua fonte preferida, clique na guia 'Usar' para vê-la em ação. Em seguida, copie e cole algum código em sua página da web. Você terá três opções para escolher:

Padrão - Este é um link de folha de estilo padrão. Coloque-o na parte principal do seu arquivo HTML. Isso economizará a etapa de adicionar a regra @import, pois você está adicionando significativamente em uma folha de estilo que já a possui.

CSS - Use a regra CSS @import caso você não queira vincular à folha de estilo gerada automaticamente em seu cabeçalho . Use o código abaixo para integrar as fontes em seu CSS:

família de fontes: 'Henry Pigeous', serifa;
font-family: 'Diplomatic'. cursiva;

JavaScript -Google e Typekit, ambos desenvolveram este código aqui como parte do Web Font loader para dar aos usuários mais controle sobre o carregamento de fontes .

Pegue um trecho HTML e coloque-o próximo ao cabeçalho HTML como:

Título da página

Vá para o CSS e siga isto:

h1 {

fonte: 400 45px/0.5 'Diplomático', Arial, sem serifa;

}

p{

fonte: 400 14px/1.5 'Henry Pegasus', Times, serifa;

}

Sobre o autor:
Catherrine Garcia é uma desenvolvedora Web experiente na Hosting Facts e uma blogueira apaixonada. Ela adora compartilhar seu conhecimento através de seus artigos sobre desenvolvimento web e WordPress.