Welcome, Guest

Want to take part in these discussions? Sign in if you have an account, or apply for one below

• Forgot your password?
• Apply for membership

1. •  
     CommentAuthorDMKE
   • CommentTimeOct 19th 2008

    permalink
   When I develop websites I love to use many fonts. But not every user has those fonts installed, and with some layouts you get in trouble when the layout is based on the font tracking. In those cases it would be nice to have a special CSS body class to determine if a font is available.
   
   Therefor I made this plugin. After activating and configuring you define a list of fonts used in your theme and the plugins JavaScript will add dynamically appropriate classes to the body tag.
   
   Note: This plugin will not modify your theme. It just helps you to apply font specific changes. You must still modify the theme by yourself ;-)
   
   

   
   
   • Based on JavaScript/CSS Font detector by Lalit Patil
   
   
   • Link into the wiki
   
   
   • Plugin homepage
   
   
   • Download (zip)
   
   

   
   
   Hope that helps ;-)
   Dominik
2. •  
     CommentAuthorlaborix
   • CommentTimeOct 19th 2008 edited

    permalink
   I'm not sure, if this is a good way. Last year I analyzed many pages, also from great web experts, to see what fonts are most used. Then I build a font sample to see how these fonts will appear on different os versions like win, linux and mac.
   
   Font sample here
   
   All listed fonts have the same size (see CSS details at bottom), but the are not equal...
3. •  
     CommentAuthorDMKE
   • CommentTimeOct 19th 2008

    permalink
   Exactly for this problem I made the plugin. As you can see on my themes CSS file, I made corrections for every font I'd like to use:
   
   body.font-corbel {
font-family: Corbel;
letter-spacing: -.005em;
}
body.font-calibri {
font-family: Calibri;
}
body.font-lucida-grande {
font-family: 'Lucida Grande';
font-size: .9em;
}
body.font-trebuchet {
font-family: 'Trebuchet MS';
}
body.font-lucida-sans {
font-family: 'Lucida Sans';
letter-spacing: -.025em;
word-spacing: -.1em;
}
body.font-tahoma {
font-family: Tahoma;
}
body.font-helvetica {
font-family: Helvetica;
font-size: 1.1em;
}
body.font-verdana {
font-family: Verdana;
font-size: .95em;
letter-spacing: -.01em;
word-spacing: -.1em;
}
body.font-none {
font-family: sans-serif;
}

/* ... modifying the H1 heading */
#head h1 {
line-height: 48px;
font-size: 166%;
/* etc. */
}
body.font-tahoma #head h1 {
font-size: 150%;
}
body.font-verdana #head h1 {
font-size: 140%;
}
   
   And for visitors with disabled JavaScript I've got a fallback solution:
   
   html {
font: 85%/100% Corbel, Calibri, 'Lucida Grande', 'Trebuchet MS', 'Lucida Sans', Tahoma, Helvetica, Verdana, Arial, sans-serif;
margin: 0;
padding: 0
}

body {
font-size: 1em;
/* etc. */
}
   
   And, well, the plugin might just be something for typographic fetishists :-D
   
   --Dominik
4. •  
     CommentAuthorsneakatron
   • CommentTimeOct 19th 2008

    permalink
   you could alternately implement Facelift into your site
5. •  
     CommentAuthorDMKE
   • CommentTimeOct 19th 2008

    permalink

   you could alternately implementFaceliftinto your site

   
   
   Well, image replacement is another way to satisfy typographical needs...
   But: PHP/GD generated images might look strange sometimes (subjective rating). They also cannot be zoomed in IE6, and in other browsers zoomed images (especially text images!) will be fast aliased. Thats IMHO a no-go. And don't forget, that the display of images also can be disabled (well, JS may be disabled at first ;-)).
   
   The other way using Flash has other problems, too.
   
   --Dominik