Olá Pessoal algum tempo atrás eu falei sobre como colocar fontes personalizadas nos eu site usado a biblioteca Cúfon, e agora vou mostrar um pouco sobre um atributo em CSS que pode lhe ajudar a fazer isso com menos esforço e códigos.
Um dos grandes desafios para a produção de um site é que ele funcione nos diversos navegadores de forma uniforme, ou seja não dê problemas ou “quebre”, outro grande desafio que está ligado a isso é usar fontes personalizadas de forma mais simples e fácil. Para isso podemos utilizar uma propriedade chamada @font-face, com ela podemos instalar fontes direto no servidor onde o seu site está hospedado e fazer com que ela seja exibida nos navegadores sem o uso de javascript ou flash.
Com isso podemos então botar a mão na massa e ver como funciona, primeiramente você deve achar uma boa fonte existe vários sites que disponibilizam fontes grátis e pagas, mais abaixo vou falar sobre direitos autorais de fontes.
Com a fonte em mão coloque-a em uma pasta ou na raiz do seu servidor para nosso exemplo vou usar a fonte Loopi você pode baixa-la no site www.dafont.com de forma gratuita. Neste exemplo vou coloca-la dentro da pasta “fontes”, assim minha estrtura de pastas fica:
fontes/Loopi.otf index.html
No CSS do arquivo index.html (ou na sua folha de estilo o arquivo.css) você deve “chamar” a fonte com o seguinte trecho de código:
@font-face { font-family: Loopi; src: url(fonte/Loopi.otf); }
Com isso sua fonte está instalada no seu site, o atributo font-family determina o nome que você quer dar a sua fonte, você pode chamar como quiser, mas se for um nome composto deve-se usar aspas, por exemplo se a fonte se chama Henry Morgan Hand logo o atributo de font-family deve ser “Henry Morgan Hand“.
E por fim é só colocar no seu seletor a família de fonte que colocou o seu site, assim:
h1{ font-family:Loopi, sans-serif; }
Note que eu coloquei mais uma fonte, ou seja se a fonte não for carregado (Loopi) qualquer fonte Sem toSerfa, como Verdana ou Arial, será colocada no lugar, também temos outros atributos no fonte face,veja este exemplo:
@font-face { font-family: Loopi; src: url(fonte/helvetica.otf); src: local(helvetica.otf); font-weight: 400; }
Aqui determinamos que se fonte no servidor não for carregada o navegador vai buscar no sistema do usuário a fonte e ainda coloca-la em negrito, o valor de 400 é um valor dentre os que este atributo tem que vão des de 100 a 900, normal, bold e outros,veja aqui mais sobre este atributo.
Bem bacana não, agora fique esperto em algumas dicas abaixo para que possa dar tudo certo no seu site.
Tipagem | Formato da Fonte | Extensão da fonte |
---|---|---|
“truetype” | TrueType | .ttf |
“opentype” | OpenType | .ttf, .otf |
“truetype-aat” | TrueType with Apple Advanced Typography extensions | .ttf |
“embedded-opentype” | Embedded OpenType | .eot |
“svg” | SVG Font | .svg, .svgz |
Aqui vai uma boa notícia os navegadores Internet Explorer na versão 7, 8 e 9 aceitam o @font-face porém apenas as extensões EOT, você pode achar vários conversores on-line e eu recomendo este da Font Squirrel que converte em um punhado de formatos para web, já os navegadores Safari, Firefox, Crhome e Opera aceitam fonts em TFF e OTF.
Aqui uma dica muito importante, nem toda fonte na internet é de graça, você deve ficar atendo a licença da fonte pois isso pode acarretar para seu projeto sanções jurídicas sobre o uso da fonte, por isso sempre de uma conferida nos arquivos da fonte que baixar que em geral tem um aquivo em TXT que mostra o tipo de licença dela, mas nada impede de você comprar a fonte e usa-la veja nos sites associados da Da Font onde comprar.
Existe vários sites de fontes por ai, eu recomento dois deles para poder baixar fontes, um é o dafont.com onde você poderá filtrar o tipo de fonte não apenas pelo tipo (caligráfica, serifada, display, etc..) como pelo tipo de licença, veja que na busca tem um link escrito “More Options” ai você pode colocar fontes free, além de poder escrever um trecho do seu texto para ir testando a fonte.
Outro ótimo repositório de fontes com licença gratuita é o próprio Google que tem em seu projeto de Google Web Fonts uma enorme biblioteca de fontes onde você pode não só baixar como usa-las onde line uma verdadeira API de fontes ao estilo Google, aqui você vai poder escolher o tipo de fonte entre escritas a mão, sem serifa, com serifa e display , apos escolher na barra azul logo em baixo você clica em “use” e vai ver um medidor de tempo de carregamento da fonte, tipo de negrito que ela suporta (font-weight), coloca-la sem instalar no seu servidor ou baixa-la no link acima do medidor.
Para maiores informações o Google também desenvolveu um hot-site sobre o assunto acesse http://www.font-face.com/ e veja mais detalhes sobre a técnica ou mesmo a Própria W3c que trata sobre o assunto.
Qualquer dúvida postem ai pessoal, até a próxima.
Fontes de pesquisa:
http://tableless.com.br/font-face-fonts-externas-na-web/
http://www.font-face.com/
http://www.google.com/webfonts
Tweet |
Dá pra colocar mais de uma fonte com isso?
Olá Adriano.
Parabéns pelo post cara…muito bom e esclarecedor! Estava a algumas horas procurando uma “salvação” para um site que estou criando e nada…mas com suas explicações a coisa andou.
Obrigado pela ajuda e parabéns pelo blog! Sucesso!
Abraço
Olá sabe me dizer se funciona corretamente em dispositivo móveis como celulares e tabletes?
Valeu cara ajudou de mais,um tutorial que foi direto ao ponto,fiquei uma semana pesquisando 😀
Realmente, bom demais o código… sempre usei imagens para personalizar as letras. kkk estava no tempo da pedra… kkk Valeu Adriano!
Tanto no meu servidor actual como nos anteriores, o recurso CSS @font-face nunca funcionou, a menos que o utilizador do meu website tenha tal font no seu sistema operativo.
Mesmo testando o código fora do servidor, com os arquivos html, css e as fonts na mesma pasta, o sucesso pode depender do browser (navegador) utilizado; uns abrem com a font correcta, outros escolhem outra, parecida ou não.
Na minha opinião… servidores, navegadores e estilos de letras ainda não fizeram as pazes entre si.
Sugiro que para pequenos textos onde se pretenda um estilo de letra especial, se use a imagem desse texto.
Obrigado amigo Adriano, eu já tinha visto os URL’s que indicou. Na verdade, a incompatibilidade dos navegadores não se limita apenas às fontes mas também à não visualizaçao, total ou parcial, de CSS e JavaScript. A razão por que se procuram soluções é porque nos interessa que o que criamos seja visto em todos os navegadores. Nos testes que fiz, e não foram poucos, alguns até pareciam ter dado resultado, mas quando retirei as ditas fontes do Windows, zás, apareceu logo outra no lugar. Não pretendo decredibilizar esta solução, recomendar apenas aos afortunados que tiveram mais êxito que eu de verificarem se nos sistemas dos amigos a coisa se apresenta em conformidade!
Parabéns pelo seu esforço!
Cara valeu , nota 100. vc salvou minha vida ja tinha batido cabeça pacas , na verdade não é dificil.
e que os outros fazem com 50 linhas o que vc fez com 4
Parabens.