tiagopassos.com

Por muito tempo a utilização de fontes na web foi bastante limitada. Só era possível utilizar fontes comuns, como Times New Roman ou Arial, porque se você usasse alguma outra fonte, o visitante só iria ver a fonte se tivesse ela no computador. Mas isso mudou.

Hoje existem alguns serviços que fornecem fontes gratuitas e online. Isso quer dizer que com pouco código você pode adicionar uma fonte legal ao seu site, mas tenha cuidado pra não transformar seu site num baile de carnaval. Se você não conhece muito sobre design, prefira fontes mais sóbrias. Você corre menos risco. 🙂

Importante: talvez seja necessário conhecer o básico de HTML e CSS para utilizar o Google Web Fonts. Mas mesmo que você não conheça, não custa tentar!

1) Adicione o seguinte código ao seu código (preferencialmente entre as tags HEAD):

<link href='http://fonts.googleapis.com/css?family=Yellowtail&v2' rel='stylesheet' type='text/css'>

2) Chame o CSS da fonte direto na tag que você quer utilizar (CSS Inline):

<span style="font-family: 'Yellowtail', cursive; font-size: 24px;">O Google Web Fonts é bem legal!</span>

O Resultado é esse:

O Google Web Fonts é bem legal!

Mas tem várias outras fontes, como essa:

O Google Web Fonts é bem legal!

Ou essa:

O Google Web Fonts é bem legal!

Quando escrevi esse artigo, haviam 206 fontes disponíveis, mas lembre-se de não fazer o que eu fiz acima! Não use muitas fontes diferentes na mesma página, porque ela pode ficar muito pesada.

Acesse  o Google Web Fonts e teste as outras fontes disponíveis. Basta clicar em “Quick-use” na fonte que você escolher, que serão dadas as instruções para uso.

Obs.: Se você está acompanhando o blog pelo Feed RSS, não vai conseguir ver os exemplos acima. É necessário entrar no blog.

É quase senso comum entre os profissionais de TI que programadores geralmente não sabem nada de design e webdesign. Você é programador e sofre desse problema? Não se aflija companheiro! Disponibilizo aqui seis templates gratuitos para você usar sem restrições em seus sistemas web.

Você pode modificá-los à vontade. Vai usar em um sistema comercial? Que tal considerar uma doação (opcional) ao autor? Os links para os sites dos autores e os links para downloads estão logo abaixo dos screenshots dos templates. Clique nas imagens para ampliá-las.

Template 1

Download – Autor

Template 2

Download – Autor

Template 3

Download – Autor

Template 4

Download – Autor

Template 5

Download – Autor

Template 6

Download – Autor

É. Finalmente consegui. Editei 120 arquivos HTML com a fonte que pediram pra mudar. “TRRRRRIIIIIMMMMM”. Tocou o telefone. Era o cliente:
– “Tiago, a fonte vai ser a antiga mesmo, viu?”
AAARRRRGGHHH!

É pessoal… isso é uma pequena estorinha do que pode acontecer com você se você trabalha com HTML e não conhece ou não usa CSS. Essa é uma das funções dele. Você pode centralizar todas as opções de estilo (cor, fonte, formatação etc.) em um arquivo só, e simplificar a alteração de alguma característica do sue layout. E mais: é possível alterar um layout completamente bastando mudar o CSS.

Para demonstrar o grande poder dessa tecnologia – que muita gente não conhece – existe um projeto chamado Zen Garden. Exitem vários layouts completamente diferentes disponíveis para demonstração, e única coisa que muda neles é o CSS. O HTML é exatamente o mesmo.

Dê uma olhada, que é bem interessante. De repente você evita ter que mudar dezenas de arquivos HTML por não conhecer ou não usar CSS.

Quem já pesquisou sobre desempenho de sites sabe que existem muitas formas de melhorar, ou seja, tornar o carregamento mais rápido.

Um dos maiores vilões da velocidade de carregamento de um site é uma grande quantidade de arquivos a serem carregados. O navegador demora muito tempo para processar o conteúdo de um site quando existem muitos arquivos a serem baixados, sejam eles .js, .css, imagens etc.

Para resolver isso, é interessante juntar todos os CSS em um único arquivo, todos os JS (JavaScript) em um único arquivo, e por que não todas as imagens em apenas um arquivo? Sim! Isso é possível.

Diversos sites usam essa técnica (YouTube, por exemplo), e existem vários sites que podem criar um Sprite pra você. Um deles é o CSS Sprite Generator (spritegen.website-performance.org).

Nele você vai anexar todos os arquivos em um zip e mandar para o site. A princípio as opções padrão servirão para a maioria das pessoas.

O CSS Sprite Generator irá te fornecer um arquivo PNG de tamanho reduzido com todas as suas imagens mapeadas em um arquivo CSS, que você poderá utilizar no seu site.

Se você tem uma página onde é exibido vários textos, pode ser necessário fazer uma quebra de página para que cada texto apareça em uma página diferente, de forma que a impressão fique mais organizada. Para fazer isso, você deve colocar cada texto detro da DIV abaixo:

<div style="page-break-before: always">TEXTO</div>

Se você tiver vários textos separados, cada texto deverá estar dentro de uma das tags mostradas acima.