Tutorial: Google WebFonts


Oi gente, tudo bom? Estou trazendo um tutorial sobre o Google WebFonts, que possibilita você por qualquer tipo de fonte em seu site. Sem contar que você pode deixar o blog com a sua cara, como por exemplo aqui no So Kawaii, personalizei todos os títulos graças ao Google WebFonts. Também não poderia faltar eu falar das fontes, explicarei os tipos de fontes mais usadas.

Vamos aprender a por no blog e qual método usar? Confira o tutorial então:

Assim que você entra no Google Web Fonts, essa é a cara que você ve, certo? Vou ensiná-los cada item de pesquisa do painel.



O Search é a caixinha de buscas pelo nome da fonte, se você já tem uma em mente. Os Filters (Filtros) são juntamente os tipos de fontes:

Fontes com Serifa (Serif):

As fontes com serifa são caracterizada por terem pequenos traços e prolongamento nas extremidades, valorizando as letras individualmente. São também as mais indicadas para a leitura de livros, pois as serifas tendem a guiar o olhar através do texto: o ser humano lê palavras ao invés de letras individuais, assim as letras serifadas parecem juntar-se devido aos seus prolongamentos, unindo as palavras. Ex: Times new roman, Garamond, Bodoni, Didot e Caslon.


Fontes não Serifadas (Sans-Serif ou Sem Serifa):

As famílias tipográficas sem serifas são conhecidas como sans-serif (do francês "sem serifa"). Já não possuem aqueles traços nas extremidades, por isso, elas são perfeitas para exibição de textos no monitor pois transmitem sensação de limpeza, clareza, organização, fatores primordiais para atrair o visitante à leitura. Ex: Helvética, Arial, Eurostile, Franklin, Optima, Univers, Kabel, Futura, Gill Sans, Avantgarde, Optima, Fruitiger.


Fontes Script/Handwriting:

São consideradas fontes Script todas que imitam a escrita humana. Essas fontes são largamente utilizadas em trabalhos gráficos como Convites, pois seguem tendências tradicionais, sugerindo classe, tradição, elegância, antiguidade. Ex: English111, Vivace BT, TypoUpringht BT e Amazone BT.


Fontes Display:

Toda fonte que foge completamente das descritas acima é tida como fontes Display. São todas as fontes comemorativas, enfeitadas, tipos como"Wingdings" que nem representam letras, mais símbolos, são classificados como Display. Essas fontes também são conhecidas como fontes comemorativas, isso devido aos desenhos curiosos de algumas delas, algumas imitam bixos, objetos, pessoas, neve, desenhos animados, outras ainda remetem a ideia de festa, comemoração, quadrinhos, tecnologia, etc. Ex: Zebrawood Fill, Zipty Do, Khaki Two, Giddyup, Cutout.


Thickness: É o filtro de fonte das mais finas para as mais grossas.

Slant: É o filtro da fonte em linha reta para a fonte mais deitada (em itálico).

Width: Esse filtro define se as fontes mostradas serão mais estreitas ou mais amplas.

Em Script, são mostradas as fontes que respeitam os respectivos caracteres, ou seja, se escolher fontes em Greek (grego) essa fonte respeitará o alfabeto grego.

Em Show All Styles, você exibirá todos os estilos da fonte, se nela existe outras opções como itálico, negrito, entre outras (exemplo: Arial, Arial Bold)


Como colocar as fontes no seu blog

Primeiro escolha a fonte que você quer por e clique em Quick Use:

Navigating the Google Fonts Repository


Nas opções 1 e 2 que vão aparecer, deixe como está. O passo 3 e 4 será explicado logo abaixo:

REL=METHOD (STANDARD)

Esta é forma standard que poderá ser colocada na seção HEAD do website.

@IMPORT

Este método faz com que o código seja incluído diretamente na folha de estilos do website (css).

JAVASCRIPT

Este método é mais fácil de colocar a funcionar. Afinal, basta um copy/paste, mas o lado negativo é o fato de você ver o texto não formatado em alguns momentos, pois o script ainda está carregando a fonte.

Eu vou ensinar pelo primeiro jeito, que é como eu utilizo, mas caso queiram aprender das outras formas, eu edito aqui depois. Vamos lá:

Com a aba STANDARD sendo mostrada, copie todo o código e cole entre as tags <head> e </head>



Agora o código da seção 4 você irá colocar no seu css na div onde quer que seja modificada a fonte:



E pronto! Claro que, ao utilizar este tipo de fontes irá fazer com que o website fique mais pesado e demore mais tempo a mostrar.

Mas, assim como acontece com as imagens, as web fonts são guardadas na cache do browser após a primeira visita. Ou seja, só na primeira visita é que será mais demorado.

Espero que o tutorial ajude vocês a utilizar o webfonts, por favor, caso queiram repostar o tutorial de os créditos para o blog, pois deu MUITO trabalho para fazê-lo. Até o próximo post.

Beijos, Jana