O CSS3 e a consequente possibilidade de utilização de Web Fonts, permite que os webdesigners respirem finalmente. Esta ideia já tinha sido proposta para o CSS2 e utilizada pelo IE, mas parece que só agora todos os browsers percebem a sua importância.
Ainda se lembram de se encontrarem limitados às típicas “Arial” e “Verdana” para não correrem o risco de o utilizador não ter a fonte utilizada no site? Isso acabou! Agora usamos as fonts que mais nos agradam e temos a garantia de que o utilizador vai ver o mesmo.
Como?
Podemos recorrer a duas opções:
1- @font-face
Alojamos os ficheiros que contêm as Font (.eot, .ttf, .svg, .woff ). Devemos alojar todos estes formatos, para garantir que será visível em todos os browsers.
Carregamos as Font no ficheiro CSS:
@font-face {
font-family: ‘capture_it_2-webfont’;
src: url(‘../fonts/captureit/capture_it_2-webfont.eot’);
src: url(‘../fonts/captureit/capture_it_2-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘../fonts/captureit/capture_it_2-webfont.woff’) format(‘woff’),
url(‘../fonts/captureit/capture_it_2-webfont.ttf’) format(‘truetype’),
url(‘../fonts/captureit/capture_it_2-webfont.svg#CopystructNormal’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
Utilizamos a Font no código CSS:
font-family: ‘capture_it-2-webfont’;
Para uso deste método existem alguns sites onde podemos gratuitamente obter todo o Kit: Font e Css. Deixo-vos aqui o link de um excelente site onde podem obter @font-face e gerar novas gratuitamente.
2- Web Fonts
Outra opção é utilizar as Web Fonts fornecidas pelo Google.
Neste caso não é necessário fazer o alojamento dos ficheiros das Font.
Carregamos o link da Font escolhida no ficheiro de html:
<link href=’http://fonts.googleapis.com/css?family=Cabin+Condensed’ rel=’stylesheet’ type=’text/css’>
E utilizamos a Font no código CSS:
font-family: ‘Cabin Condensed’, sans-serif;
Basta seguirem os passos fornecidos no site:
http://www.google.com/webfonts
Boas navegações!
