Como usar fontes do google em seu próximo projeto web e por que você deve

escolha da fonte é uma decisão de projeto integrante em qualquer site, mas na maioria das vezes estamos contentes com o mesmo serif de idade e sans-serif família. Enquanto o corpo principal do texto deve ser sempre algo otimizada para facilitar a leitura a menos que você quer que os leitores para obter uma dor de cabeça, títulos e textos de destaque pode ser o seu espaço para adicionar um design único com algum dom da fonte.

Leia mais para descobrir como usar qualquer um dos Web Fonts Google em seu site.

fundo

Com CSS, você pode especificar uma cadeia de fontes para usar se o preferido não está disponível. Isso permite que você tenha uma primeira escolha - talvez um Fonte- menos comum, mas livre, então tem backups no lugar que sempre estará lá com o Windows ou Macs. Geralmente, porém, os web designers vão ficar com cadeias Família da fonte experimentadas e testadas, como descrito por escolas w3.

No passado, se uma fonte diferente foi desejado, os designers foram obrigados a criar imagens para o texto em vez - logo, cabeçalhos etc. As desvantagens de haver:

• Imagens não escala bem.
• As imagens não são lidos por leitores de tela.
• Você não pode selecionar o texto em imagens.
• Os motores de busca não podem “ler” imagens.
• carregamento da imagem diminui a página web.

Então, há uma solução melhor? Que nos permite usar um conjunto universalmente disponível de fontes livres, sem recorrer a imagens?

Google Web Fonts

A resposta vem do Google. Google Web Fonts é essencialmente uma coleção de (a contagem atual, 489) Fontes otimizados armazenados na nuvem, que podem ser incorporados em seus projetos web (ou mesmo apenas transferidos para usar no seu computador).

Além disso, o site do Google Web Fonts torna mais fácil para comparar e escolher, em seguida, dá-lhe todo o código que você precisa para incorporar a fonte via javascript ou CSS - mais sobre isso mais tarde.

Video: Google Fontes - Como usar?

Começando

De cabeça para o local de fontes Web, e clique começar a escolher fontes começar.

A interface é bastante auto-explicativo - à esquerda você pode procurar keywords- e filtro específico por fonte básica de tipo ou filtro para fatores específicos, tais como espessura da carta. A barra no topo ajusta apenas o texto de visualização. Se você tem um parágrafo específico de texto que deseja testá-lo em, por exemplo, mude para o separador parágrafo e cole no seu texto.

Como eu mencionei, é melhor não escolher nada muito extravagante para o texto principal de conteúdo, de modo a manter a qualquer serif ou sans-serif famílias se você realmente quer ir para algo único lá.

Quando você vê que você gosta, basta adicioná-lo à sua coleção.

Clique no Reveja botão para entrar no modo de revisão e comparar todas as suas escolhas.

Video: 1001 fontes, como usar fontes do google fonts em seu site

No modo de revisão, você é mostrado uma variedade de tamanhos de fonte e quer um parágrafo ou título texto. O sistema também irá fazer uma escolha inteligente sobre qual lhe mostrar, dependendo do caso de uso típico desse Fonte- mas você pode mudar o modo de visualização, se quiser.

Vá para a direita para ver outras fontes em seu atual da coleção, clique no X no canto superior direito de rejeitá-los.

test drive é um modo particularmente interessante que irá combinar todas as fontes em sua coleção para mostrar como ele pode parecer quando combinado em um layout de página básica.

Video: Como usar o Google Fonts em seus projetos Web

OK, Escolhido. Como posso usá-los?

Com sua coleção reduzida, clique no Reveja botão na barra grande azul. Caso você tenha ido ao mar e incluiu muitos (na verdade, mantê-lo para 2 no máximo), o indicador de impacto de carregamento da página irá avisá-lo.

Desloque-se para pegar o código relevante. Existem 3 opções aqui:

• Padrão (link rel = método): Isso precisa ser colado na seção HEAD do seu site, então você precisa estar confortável com HTML para fazer isso. Para WordPress, você estará adicionando-à header.php se você escolher esse caminho. Eu não recomendo.
• @importar: este método vai diretamente para o arquivo de estilo, que é onde nós estaremos especificando as fontes para vários elementos da página de qualquer maneira, então eu, pessoalmente, recomendo este. Para temas WordPress, colocá-lo em style.css logo após a seção de informação do tema
• javascript: Auto-explicativo - coloque o código em qualquer lugar em seu tema. A vantagem de usar este método é que a fonte será carregada de forma assíncrona - o site será primeiro exibido na fonte fallback, em seguida, irá mudar uma vez que a fonte foi totalmente carregado. Embora o tempo inicial de carregamento da página será mais rápido, ele irá criar uma súbita mudança dissonante para o usuário que você pode não querer.

Esse é o passo 1. Passo 2 é especificar a fonte onde você quer que ele usou. Não temos espaço para um tutorial CSS completo aqui (eu sugiro que estes 5 locais de aprendizagem CSS- e minha própria 5 passos de bebê em tutorial CSS), Mas basta dizer que você estará ajustando nada em sua folha de estilo que diz família de fontes, e não se esqueça de incluir o estilo de backup como sugerido pelo Google.Top 5 Sites para aprender CSS onlineTop 5 Sites para aprender CSS onlineconsulte Mais informação

otimizado

Usando uma fonte não-padrão que o usuário precisa baixar vai adicionar uma pequena quantidade de tempo para o carregamento da página - isso é inevitável. No entanto, uma fonte web típico do Google é de cerca de 100KB - para comparação, este é aproximadamente do tamanho de uma boa imagem jpeg de tamanho médio qualidade. Como imagens, a fonte web serão armazenados em cache no navegador do usuário, portanto, apenas o carregamento da página inicial será ligeiramente atrasado.

Resumo

Eu admito - eu realmente amo fontes. Espero que como muitos de vocês, eu tendem a horda-los no meu disco rígido - apenas no caso, você sabe ?! Agora eu posso realmente fazer uso de algumas fontes únicas em meus projetos web - Estou animado. Por favor, não negligenciar as fontes em seu site!

Se você tem dúvidas sobre a implementação fontes web em seu site, não hesite em perguntar nos comentários e eu vou ver se posso ajudar.