Como usar fonts da Web com o "@font-face" no Blogger

8 de janeiro de 2014

Nenhum comentário:

Introdução ao uso de fonts personalizadas em seu CSS

O blogger por padrão, possibilita o uso de diversas fonts, e estas são encontradas no Designer no Modelo. No entanto, muitos acham estas fonts limitadas (como eu), e preferente utilizar outras fonts, como fonts que estão instaladas em seus computadores.

No entanto, é um erro realizar este procedimento: no momento que o leitor acessa seu blog, o navegador irá puxar do CSS do blog a font que foi declarada a ser usada na página, e se a font que foi declarada não estiver presente no computador do usuário, uma font padrão do navegador será indicado a substitui-la, fazendo assim, uma completa desordem no layout do blog.

Solução: @font-face

O que se deve fazer nestes casos, é usar ou uma font universal (como a Arial, por exemplo), ou indicar uma font de web, utilizando uma regra CSS chamada de @font-face. Essa regra permite que o navegador puxe a font de determinado, caso o leitor não a tenha instalado no computador.

Alguns sites possibilitam o compartilhamento de fonts, eu particularmente, gosto muito do Google Fonts.

Como aplicar no CSS

Usarei a font "Open Sans", como exemplo. O primeiro passo, é criar a regra @font-face, que deverá ser aplicada dentro da tag referente ao CSS do blog, que é a <b:skin>. Na prática, a regra ficará assim:
@font-face { font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v7/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'); }
Agora, com a regra definida, e já indicando o caminho da font, é apenas necessário que indiquemos ela no CSS normalmente, como para definir a font que será a padrão do blog, como neste exemplo:
body {
  font: normal normal 14px Open Sans, Arial, Tahoma, Helvetica, FreeSans, sans-serif;
  color: #222222;
  background: url(http://i.imgur.com/vTCMl0e.png);
}
 Para maior esclarecimento quando ao uso deste e outras regras CSS, aconselho que façam uso do w3schools.com. E é isso, essa foi apenas uma dica bem interessante que pode ser muito útil em seu blog. Até porque, fonts modernas deixam seu blog com uma aparência profissional e agradável.

Nenhum comentário:

Postar um comentário