Você sabia que seu navegador da web está baixando automaticamente e usando fontes que não estão instaladas em seu sistema? As fontes da Web ajudam a melhorar a aparência das páginas que você navega todos os dias. Veja o que são e como funcionam.
Índice
Fontes da área de trabalho vs. fontes da web
Todos nós usamos fontes todos os dias. Alguns deles vêm com o seu sistema operacional , alguns vêm de aplicativos como o Adobe Creative Suite ou Microsoft Office e alguns são aqueles que você baixa ou compra e instala por conta própria . Depois de instaladas, você pode usar essas fontes em processadores de texto, software de edição de imagens e muito mais. Essas são fontes da área de trabalho e são armazenadas localmente.
Outro tipo de fonte tornou-se mais importante à medida que nossa experiência em computação mudou para online. São Web Fonts – tipografia armazenada na nuvem (e depois armazenada em cache no navegador) e usada para gerar o texto que aparece em sites.
Uma breve história das fontes da web
Nos primórdios da Internet, a tipografia nas páginas da Web era limitada às fontes instaladas em seu sistema. Se uma fonte não foi instalada, a página da web carregaria uma fonte “substituta” padrão que era mais provável de estar disponível. Por causa disso, os web designers costumam escolher fontes de sistema padrão para seus sites.
Entre eles estavam os Core Fonts for Web da Microsoft , um conjunto de fontes disponibilizadas gratuitamente para web design. Este pacote incluía fontes de sistema amplamente utilizadas, como Times New Roman, Arial, Comic Sans e Trebuchet. Como alternativa, os designers podem usar famílias de fontes como Serif, Sans-Serif e Monospace para especificar o estilo geral de uma fonte, mesmo se um específico não estiver disponível.
Isso mudou em 2010, quando o Google lançou o Google Fonts , um vasto repositório de código aberto para fontes gratuitas que pode ser usado em qualquer lugar na web. Desde então, outros concorrentes, como o Typekit da Adobe e os plug-ins de fontes hospedados na web, surgiram. Milhões de sites de todo o mundo são executados em fontes da web, incluindo o pacote de produtividade do Google .
Como funcionam as fontes da web
O maior provedor de fontes da web, o Google Fonts, é uma extensa biblioteca da web com mais de mil fontes. Você pode usá-los em seu site puxando-os via CSS, e os desenvolvedores móveis podem acessar essas fontes ao criar aplicativos Android.
Quando uma página da web usa Google Fonts, ela puxa uma fonte do banco de dados do Google e exibe o texto dessa fonte para você em seu navegador. Essas fontes são hospedadas no servidor do Google e carregadas quase que instantaneamente. Outros serviços de fonte em nuvem funcionam da mesma maneira.
Outra alternativa é usar fontes incorporadas e auto-hospedadas na web. Isso é feito por meio do Web Open Font Format (WOFF) – um arquivo de fonte compactado desenvolvido pela Mozilla que é compatível com a maioria dos navegadores da web modernos. WOFF é útil se você deseja incorporar uma fonte personalizada que não está disponível em um serviço de fontes da web.
Obtendo Web Fonts
O repositório Google Fonts e todas as fontes sob ele são de uso totalmente gratuito e acessíveis a todos. Ele só usa fontes sob uma licença aberta, e muitas dessas fontes se tornaram a base do design da web, como Roboto, Lato e Montserrat. O Google hospeda um site que lista todas as fontes disponíveis e permite que você experimente e compare-as entre si. O Google também oferece um banco de dados de ícones vetoriais gratuitos.
Como essas fontes estão disponíveis gratuitamente, você também pode baixar os arquivos de fontes originais para uso em sua área de trabalho . Muitos sites hospedam repositórios do Google Fonts, incluindo o próprio Github do Google . Você pode usar essas fontes em projetos, compartilhá-las gratuitamente com outras pessoas e baixá-las de outros lugares na Internet gratuitamente.
Muitos construtores de sites e gerenciadores de conteúdo, como WordPress e Squarespace, vêm com suporte para fontes da Web prontas para uso. Se estiver usando um site personalizado, você precisará carregar o arquivo de fonte em seu servidor e usar o código CSS para apontar para o arquivo de fonte que deseja usar.
Se você gostaria de saber mais sobre o uso de fontes da web para o seu site, consulte este Guia de fontes da Web CSS da W3Schools.
