O Cufon é uma API que tem como função substituir fontes em javascript, o que é uma mão na roda para resolver o problema de fontes utilizadas em seu site, uma vez que bastam dois arquivos e pequenas configurações para deixá-lo redondo.
De maneira rápida e robusta, o Cufon uma solução sem o uso de plugins, possibilitando ainda a liberdade de definir diferentes estilos para o texto substituído, através de CSS.
Vejam na prática como funciona em nosso site. O menu lateral foi feito utilizando Cufon.
COMO UTILIZAR?
Primeiramente, é necessário baixarmos o cufon-yui.js, que é quem faz toda a mágica. Basta fazer o download o arquivo no site do projeto ( Opção “Download” do Menu), colocar o arquivo sem seu site e declará-lo:
Em seguida, é hora e utilizarmos o gerador, também no site, para que a fonte desejada seja convertida. O gerador criará um arquivo de fonte SVG e salvá-lo em um arquivo JS. Deveremos selecionar a fonte a ser utilizada, selecionar os caracteres a serem usados, recomendável selecionar a opção “All”(Todos), ler os “Terms” e selecionar “I acknowledge and accept these terms” e, por fim, no final da página clicar em “Let’s do this”. Será gerado um arquivo “.js”, faça o download dele.
Nota: A fonte a ser convertida não pode estar na pasta “Fonts”. Copie a fonte para outro local e selecione de lá.
Com o download feito, esse arquivo precisa ser incluído em outro script após o Cufon:
Agora é o momento de substituir o texto desejado. Iremos utilizar a seguinte função:
Com esta função, o Cufon se encarregará de substituir toda tag h1 de seu site e converter para a fonte declarada.
Podemos trabalhar melhor estas substituições, especificando pontos específicos a serem substituídos. Podemos utilizar para isso Id’s e Classes do Css por exemplo:
Dessa maneira, a substituição deixa de ser em todo o documento, e passa para os campos desejados.
Além disso o Cufon possibilita a substituição de mais de uma fonte, como no exemplo:
Sempre lembrando que é necessário declarar todos os arquivos js de fontes que serão utilizadas no seu site.
Qualquer dúvida, pode consultar a rica documentação do Cufon em http://wiki.github.com/sorccu/cufon/, ou deixe seu comentário no post.
Até a próxima!
Fale aqui no nosso WhatsApp
5 de agosto de 2010, 15:23
Qual a diferença para o uso de @font-face?
5 de agosto de 2010, 15:34
Douglas,
O cufon, apesar de ser mais pesado, tem mais compatibilidade com todos os browsers. Porém, se você vai desenvolver sem restrição de usar CSS3 e para browsers mais novos, utilize o @font-face que é mais leve e gasta menos recurso.
Outra vantagem do cufon é que ele apresenta o efeito de anti-alias no texto. 😉
Abraços!
10 de agosto de 2010, 16:59
“Outra vantagem do cufon é que ele apresenta o efeito de anti-alias no texto. 😉 ”
Vantagem que joga o font-face pra escanteio.
Inpossivel usar uma fonte serrilhada num layout :/
23 de agosto de 2010, 16:40
Leidiane, concordo com você. O efeito de anti-alias do cufon é realmente fantástico. Mas acredito que dependendo do contexto (caso você realmente não precise de um texto que parece uma imagem editada, como nos títulos de notícias em grandes portais) o anti-alias não faria tanta diferença. O importante é pesar o que realmente atenderá melhor a necessidade do site onde a técnica será usada! 😉
Grande abraço.
24 de agosto de 2010, 14:28
não consegui usar o line-height!
o engraçado é que funciono só no ie6 e ie7
mas no firefox, chrome, opera e safari não.
se alguem me ajudar eu fico muito agradecido
=]
13 de setembro de 2010, 10:57
Bom dia! É importante mencionar que este método não é vantajoso quando da utilização de fontes populares reconhecida por diversos navegadores e presentes em todos os s.o (tahoma, verdana e etc)
16 de setembro de 2010, 12:55
Gostaria de saber se eu tenho que pagar para usar as fontes como Myriad_Pro por ex? e como funciona o esquema de licença de fontes.
vlw galera…otimo tuto!!
17 de setembro de 2010, 09:45
Rodrigo, acho que esta sua dica não faz muito sentido, pois o cúfon tem um objetivo claro, que é poder utilizar fontes ‘não populares’ para rodar nas máquinas. Então a pessoa não precisará usar esse recurso com fontes padrões, a não ser que ela goste de perder tempo com coisas simples como essa.
Vlew!
10 de novembro de 2010, 14:25
use o cabeçalho
14 de dezembro de 2010, 10:24
E em questão dos acentos ? é a font que estou utilizando ou ainda não suporta ?
14 de dezembro de 2010, 10:28
Vinicius,
Para os acentos, você precisa utilizar uma fonte que tenha a acentuação, e quando for gerar a fonte no cufon, marcar a opção de “Basic Latin punctuation”! 😉
Abraços,
13 de janeiro de 2011, 08:10
Bom dia!
Estou com problemas quando faço a substituição de classes CSS no IE Cufon.replace(‘.cufon-titulo’); por exemplo. Se eu substituir por qualquer outra coisa (H1, Div) funciona perfeitamente. No FF funciona de qualquer forma.
Tem alguma coisa diferente para o IE que eu tenha que fazer pra funcionar a alteração de classes css?
Obrigado
17 de janeiro de 2011, 17:57
Parece interessante, mas existe o problema dos buscadores não reconhecerem as palavras como texto, prejudicando o SEO. O mecanismo de renderização é escrito em Javascript, e motores de busca não lêem o Javascript.
23 de janeiro de 2011, 03:53
Não sei não, mas uso o @font-face e funciona em todos os browsers a partir do IE-7. No IE-6 não testo, pois ainda não fiz um projeto que levasse em consideração, por questões conhecidas. E também não tive problemas com letras serrilhadas. Talvez ainda não tenha usado uma font que tende a ter esse efeito. Não conhecia esse cufón e continuo não vendo, até agora, um bom motivo para usar. Mas a post está bacana.
1 de março de 2011, 14:27
Grato pela dica e
Parabéns pelo site
Coridalmente,
15 de março de 2011, 15:45
O cufón seria SVG ‘vetor’, da uma difierença enorme.
8 de abril de 2011, 19:00
Resolveu meu problema, obrigada!
Por favor, nunca tire essa página do ar =D
15 de abril de 2011, 15:49
Vinicius, no caso apenas o Basic Latin punctuation não resolverá seu problema, você além desta opção deverá selecionar a opção “Latin-1 Suplement” .
att
19 de abril de 2011, 14:42
Uso o Joomla, e esse tutorial funcionou perfeitamente.
O único problema é que o texto deixa de ser selecionável, fica como se fosse imagem!
Alguém sabe o por quê, e como se resolve isso?
6 de maio de 2011, 11:09
Masterwork!!! Salvou minha vida ^^
9 de maio de 2011, 23:18
Você é um anjo 🙂
Muito obrigada!
Maysa
15 de maio de 2011, 15:09
Fiquei curioso pra saber como funcionava esse cufon…
Fonte serrilhada para título é #foda mesmo!
16 de junho de 2011, 10:00
Implemento a fonte, mas nao funciona os paragrafos???
27 de julho de 2011, 05:28
Ainda bem que a Microsoft começou a desenvolver seu IE mais amigável para CSS. Quando todos os browsers usarem um só padrão CSS esses probleminhas com fontes serão resolvidos. Mas enquanto essa era não chega, VIVA O CUFÓN! Rsrsrsrs
abraços.
8 de agosto de 2011, 16:47
Excelente! Muito útil, utilizei e deu tudo certo 🙂
Obrigado!
4 de outubro de 2011, 01:13
Pessoal acho bacana utilizar Cufon, porém acho que Font-face é bem mais leve, e SIIIM funciona no IE6 e IE7, basta apenas ter uma font no formato .eot . Existe um site que acho que iria economizar um P tempo para todos!
http://www.fontsquirrel.com/fontface/generator
Ele gera um arquivo para vc utilizarem em todos os browsers (Opera, FF, Chrome, Safari e IE).
ps.: IE não é browser, é uma falha da humanidade…. kkkk
11 de outubro de 2011, 11:24
Muitíííííííííííííííííííííííííssimo obrigado!
11 de outubro de 2011, 11:27
Só tem um porém, line-height não pega… E parece q outras propriedades também não.
14 de dezembro de 2011, 11:29
Acredito que em questões de vantagem e desvantagem, o Font-face é mais relevante devido seu funcionamento independente de JavaScript e por ser mais leve, porém só é relevante quando a fonte não necessita do Anti Alias, caso contrário o script do Cufon parece bastante útil.
Obrigado pela dica.
21 de dezembro de 2011, 00:35
mano como sao gerados aqueles links (.js) não entendi
21 de dezembro de 2011, 00:41
Utilize o padding! 😉
21 de dezembro de 2011, 00:41
Micael, acesse o site http://cufon.shoqolate.com/generate/ e faça o upload das fontes que você deseja gerar nos campos. 😉
4 de fevereiro de 2012, 20:05
Olá.
Não entendo muito de programação. Segui o tutorial e fui feliz. Porém, gostaria de aumentar o tamanho da fonte que que foi gerada do Cufon. Queria que ela aumentasse quase o dobro. Como faço?
Abraço,
Magnos
7 de março de 2012, 09:41
Olá Magnos.
Neste caso você precisará utilizar CSS para aumentar as fontes que você deseja. Conhece alguma coisa de CSS?
9 de fevereiro de 2012, 10:00
Parabéns pelo post. Continue criando bons post’s a internet está precisando. Abraços.
7 de março de 2012, 09:42
Obrigado Leonardo!
13 de março de 2012, 17:28
Cara, estou utilizando este cufon pela primeira vez e estou tendo problemas com encoding pois não aparece as letras com acentos, como possa ajustar isso ? já converti uma nova fonte, porém o erro permanece, poderia me ajudar ?
13 de março de 2012, 17:34
Olá, João!!! Na página de geração de fontes Cufon, existe a opção “Basic Latin”. Marque a opção para que o cufon gerado tenha os símbolos latinos. Lembrando que sua fonte também precisa ter os caracteres! 😉 Abraço!
18 de abril de 2012, 17:46
Boa tarde, eu gostaria de saber se através do Cufon eu poderia customizar um texto dentro de um value, como é usado nos botões “OK” e “Cancelar”. Obrigado
25 de junho de 2012, 17:37
Sim pode sim William
2 de dezembro de 2012, 20:46
Isso também serve para Asp.Net?
25 de dezembro de 2012, 23:19
Man, queria saber como que usa isso no wordpress.. Pode dar um helps ae?
29 de janeiro de 2013, 12:44
Pequeno problema; special characters. Abaixei código de uma fonte chamada Vegur. Ou o código não está completo, ou tem problemas com special characters. Usando UTF-8
5 de fevereiro de 2013, 16:00
Rapaziada, estava com o mesmo problema de font sem acento, fiz o seguinte, entrei no site indicado no post, fiz a conversão conforme está descrito, então fui na pasta js do tema, como o cufon já era usado pelo tema, substituí o nome arquivo que o site gerou pelo arquivo de fonte publicado, no meu caso o arquivo se chamava Museo_Slab_500_400.font, o site havia gerado um arquivo js com o nome da font que escolhi, quando substituí o nome do arquivo convertido(times…js) pelo arquivo que era usado pelo cufon, o blog assumiu a fonte que eu queria e fim de chateação…
11 de março de 2013, 20:45
Ajudou bastante. obrigado por compartilhar
25 de abril de 2014, 23:00
Resolveu meu problema com os acentos, valeu!
12 de março de 2015, 17:58
Pena que não funciona mais…
16 de abril de 2015, 11:01
funciona sim
28 de outubro de 2015, 15:25
Pelo que entendi funciona tipo o Webfonts, haveria alguma vantagem em relação ao webfonts ?