Em meia era internética em que o povo se revoluciona atrás de soluções cabíveis para uma mudança no design ao máximo e ao proveito de ambos recursos impostos na web. Fontes é algo mamilos polêmico na hora de escolher entre as opções Arial, Helvetica, Verdana, Comic Sans entre outras. Normalmente, o editor não curte muito usar essas fontes, e fontes como Ubuntu e Droid Sans, entre outras que vivem por aí, viram o alvo. O problema é: como eu ponho isto na web se não é nativo? O Google Web Fonts nos trás a exata solução.
O serviço não é atual, e vejamos algo meio antigo com um tempinho de vida na Google. Um serviço 100% estável e fácil de se usar que nuns clicks e um CTRL+C (Command+C) e CTRL+V (Command+V), você faz a mudança toda em seu CSS alterando de “font-family: Arial;” para “font-family: Ubuntu;” e está feita a mudança épica, e acredite, isto muda muito o visual do seu blog e a atenção do leitor.
Não vou enrolar a vida de vocês, acessem logo o site do Google Web Fonts, o serviço gratuito para impor novas fontes em seu site/blog, diferente de outros serviços que são pagos e tem limite de uso de fontes por conta. Caso desejem saber desse, aguardo o comentário de vocês com o pedido.
Como escolher a fonte
1) Acesse o site do Google Web Fonts;
2) Escolha sua fonte. Vai escolher a fonte que estará nesta forma no site:
3) Após ficar um século escolhendo, como alguém aqui, aperte o botão “Add to Collection“:
4) Percebam que automaticamente irá surgir repentinamente na parte de baixo da página, uma área azul como a que vou por abaixo. Esta são suas fontes escolhidas:
Caso desejas, você pode pegar e ir catando mais fontes para por no seu projeto, mas vou avisando que isto pesa demais no site, caso escolha muitas (no máximo duas é de bom tamanho). Tudo que vocẽ escolher vai aparecer naquela caixa azul, mas caso escolha alguma fonte por engano, você pode pegar e apertar no “X” ao lado direito do nome da fonte que some da lista de seleção.
5) Escolheu tudo? Tudo certo? Vamos então apertar o “Use“:
6) Aparecerá de cara uma página nova. Têm várias opções de escolha aonde você vai escolher se vai ou não usar a fonte mesmo e das formas dela. Recomendo que só ponha ela em normal, itálico e negrito (normal, italic e bold) e só selecione das fontes que você realmente irá utilizar:
Dica: Ao lado dessas opções, tem um indicador do quão pode ser prejudicial ao seu projeto se por fontes demais em seu site. O indicador é atualizado conforme você vai escolhendo as novas opções de como você quer a sua fonte, logo, tente deixar pelo menos no amarelo, senão sua página vai ficar lenta por muita execução de scripts — mesmo tendo só no código e não usar no CSS, pesa por uso de scripts.
7) Tudo pronto? Agora vamos descer a página e terá uma caixa de texto entre uma parte azul (preste bastante atenção agora):
Há 3 abas: o “Standard”, “@import” e “Javascript”. Ambos são para por em seus arquivos do blog. Usando o “Standard” e “Javascript”, você deve copiar o código e por antes de “” em seu layout. Para ficar menos complicado, eu recomendo que você utilize a “@import”, caso use arquivo CSS. Utilizando este método, você apenas deve por o código no CSS e acabou, fim de papo. É muito mais prático e tenho até uma dica para por: coloque antes de “body {“.
8) Agora é contigo. Antes de fechar a página, abaixo de onde você pegará o código para ativar as fontes em seu código, você pode conferir onde editar no CSS, ou seja, ele ensina como mudar:
Bem simples, não acha? De primeira funcionou comigo, e raramente pesou o meu blog com esta informação. Até onde eu sei, aqui no Designer Effects utilizamos o Google Web Fonts para várias coisas, e vocês podem ter um exemplo claro na “sidebar” (ou barra lateral), em que nossos títulos são fontes personalizadas.
