Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Using Web fonts and Cufon

1:19 pm on Feb 10, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Oct 25, 2006
posts: 1042
votes: 0

I'm testing Cufon options and working example at URL:

1. How to set correct HTML to test Cufon as it seems issue that web fonts are not different when I set different web fonts.
2. How to set <canvas> as HTML5 script if there is Javascript CLASS not ID as sample has ID but can be many web fonts:
<script type="text/javascript">
window.addEvent('domready',function() {
Cufon.replace('#cufon-area h1, #cufon-area h2, #cufon-area h3');
Need help.

Working script:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="javascript/cufon.js"></script>
<script type="text/javascript" src="javascript/javascript/Sin_City_400.font.js"></script>
<script type="text/javascript">
window.addEvent('domready',function() {
Cufon.replace('#cufon-area h1, #cufon-area h2, #cufon-area h3');
<style type="text/css">
/* global */
* { margin:0; padding:0; } html { overflow-y:scroll; }
body{ font-family:'lucida grande',tahoma,verdana,arial,sans-serif; font-size:62.5%; color:#222; }

/*layout */
.center{ width:1000px; margin:0 auto; }
#page{ }
#header{ height:40px; background:url(/wp-content/themes/walshhub/images/header.gif) 0 bottom repeat-x #fcfcfc; position:relative; }
a#header-logo{ position:absolute; top:7px; left:0; text-indent:-99999px; width:32px; height:25px; display:block; background:url(/wp-content/themes/walshhub/images/dwavatar.png) 0 0 no-repeat; }
#header-title { font-weight:normal; font-family:"Droid Serif",Cambria,Georgia,Palatino,"Palatino Linotype",Myriad Pro,Serif; font-size:2em; }
#header-title a{ color:#000; text-decoration:none; position:absolute; top:10px; left:40px; }

#content{ background:#fff; padding:10px 0 10px 0; }
#content-left { width:700px; margin:0 20px 0 0; float:left; }
#content-right { width:280px; float:left; }
#content-right a{ float:left; padding-right:10px; display:block; width:125px; height:125px; }

#footer{ background:#eee; border-top:1px solid #ccc; padding:10px 0; }
#footer1, #footer2, #footer3 { width:300px; float:left; margin:0 30px 0 0; }
#footer3 { width:330px; margin-right:0; }

/* tags */
abbr{ border-bottom:1px dotted #ccc; cursor:help; }
blockquote{ background:#eee; margin:0 20px; padding:10px 20px; }
code{ font-family:'Consolas', 'Monaco', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; }
h1{ font-size:4.3em; margin:0 0 20px 0; }
h2{ font-size:2.8em; }
h1, h2, h3, h6{ font-weight:normal; font-family:"Droid Serif",Cambria,Georgia,Palatino,"Palatino Linotype","Myriad Pro",Serif; }
h3, h6{ font-size:2em; }
h6{ padding:0 0 5px 0; }
label,select,input[type='submit'],.point { cursor:pointer; }
li{ }
li,p{ line-height:19px; margin-top:5px; }
ol, ul{ padding:0 0 10px 35px; }
p{ margin:5px 0 14px 0; font-size:1.2em; line-height:1.8em; }
textarea,input[type='text'], input[type='email'], input[type='password']{ border:1px solid #ccc; padding:5px; font-size:120%; font-family:'lucida grande',tahoma,verdana,arial,sans-serif; }

/* stuff */
.clear { clear:both; }
.exhead{ background:#e8f0f6; border-top:1px solid #fff; color:#000; padding:10px 10px; font-size:120%; }
.exhead a{ color:#6D84B4; }
.intro{ background:#ffd987; font-style:italic; padding:5px 10px; margin-bottom:20px; }
.relative{ position:relative; }

/* links */
a{ color:#3b5998; }
a:link, a:visited{ text-decoration:underline; }
a:hover, a:active{ text-decoration:none; }
a img{ border:0; }


<div id="cufon-area">

<h1>HTML Ipsum Presents</h1>

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>

<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<h3>Header Level 3</h3>

<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>

<br /><br /><br /><br /><br />


10:50 am on Feb 21, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Oct 25, 2006
posts: 1042
votes: 0

Is there possible to reply?

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members