Personalize as Fontes em seu Site
Com certeza no desenvolvimento do seu site você já pensou em utilizar uma fonte personalizada mas se deparou com o problema de incompatibilidade entre Browsers por não ser crossbrowser, ou o usuário que acessar seu site não possuir a fonte que você utilizou, pensando nisso a Google lançou o Google WebFonts um site que já possui um acervo 293 fontes diferentes pra você utilizar em seu site que funciona de forma compatível e crossbrowser ou seja, irá funcionar perfeitamente em qualquer nevegador sem a necessidade de você ficar criando hacks e etc...
Para utilizar uma fonte personalizada do Google Webfonts, escolha a fonte que mais lhe agradou, lembrando que assim como em outros sites de fontes você tem a opção de digitar o que deseja para testar o funcionamento da fonte e se a mesma se adequada ao seu site, após isso clique em "Quick use" e na página que irá se abrir existe um velocímetro, demostrando o tempo de carregamento dessa fonte, notem que até aonde o velocímetro marca em verde é o tempo de carrehamento aceitável, após isso sua página pode demorar um pouco mais para ser carregada, existem também em algumas fontes alguns checks que você pode desmarcar para deixar a fonte mais leve. Abaixo irá existir 3 abas "Standard", "@import" e "Javascript" que são os três métodos que você pode integrar a fonte ao seu site, recomendo que utilizem a "Standard", copie o código gerado e cole entre as metas e do seu site, após isso, copie a font-family: dessa fonte e aplique no elemento que você deseja personalizar, por exemplo: Suponhamos que todos h1 que são os titulos dos posts que eu tenho em meu site, a fonte será personalizada, então no style.css coloco na folha de estilo o seguinte código.
h1 { font-family: nome_da_fonte_personalizada; }
Coloque o font-family: que o google gerou desta fonte. Recomendo também que você coloque após o nome da fonte personalizada o nome das fonte padrão que você está utilizando no desenvolvimento do seu projeto, pois caso ocorra algum problema com a fonte personalizada, o Browser irá carregar fontes padrão como a "Times New Roman". Veja um exemplo de uso.
h1 { font-family: nome_da_fonte_personalizada; Arial, Helvetica, sans-serif }
Abs, e até a próxima.
Gostou? Então compartilhe! |
