This solution uses two stylesheets: wpse-4508-default.css and wpse-4508-small.css. We always load the default, and load the small version too if a certain font does not exist. We save the result in a cookie so the next time don't need to do the test and extra loading on the client side, resulting in a smoother experience. The code is designed to run from your theme directory, so you can add the PHP code to your functions.php. I added some var_dump() and alert() lines to help you understand what goes on. I only tested it in Safari on Mac OS X.
<?php
add_action( 'wp_head', 'wpse4508_wp_head' );
function wpse4508_wp_head()
{
// Always display our normal stylesheet
wp_enqueue_style( 'wpse4508_default', get_stylesheet_directory_uri() . '/wpse-4508-default.css' );
$urlSmallStylesheet = get_stylesheet_directory_uri() . '/wpse-4508-small.css';
if ( ! array_key_exists( 'wpse4508_hasfont', $_COOKIE ) ) {
// We don't know anything, detect it
var_dump( 'No cookie info, loading JS' );
wp_enqueue_script( 'wpse4508_detector', get_stylesheet_directory_uri() . '/wpse-4508-detector.js', array(), false, true );
// Send the style sheet URL to the front
wp_localize_script( 'wpse4508_detector', 'WPSE4508_Detector', array( 'url' => $urlSmallStylesheet ));
} elseif ( 'false' == $_COOKIE['wpse4508_hasfont'] ) {
// We know we should load the small stylesheet
var_dump( 'Cookie info, no font, extra stylesheet via PHP' );
wp_enqueue_style( 'wpse4508_small', $urlSmallStylesheet );
}
}
// A simple div to test this code
add_action( 'wp_footer', 'wpse4508_wp_footer' );
function wpse4508_wp_footer()
{
echo '<div class="wpse4508_test">WPSE 4508 test</div>';
}
The wpse-4508-default.css file:
.wpse4508_test
{
background-color: red;
font-size: 20px;
width: 100%;
text-align: center;
position: absolute;
top: 0;
}
The wpse-4508-small.css, with the extra rules. I don't think !important is needed, since they load after the previous one, try this yourself.
.wpse4508_test
{
background-color: green !important;
font-size: 10px !important;
}
The Javascript file that detects the font and sets a cookie.
var Detector = function(){
var h = document.getElementsByTagName("BODY")[0];
var d = document.createElement("DIV");
var s = document.createElement("SPAN");
d.appendChild(s);
d.style.fontFamily = "sans"; //font for the parent element DIV.
s.style.fontFamily = "sans"; //serif font used as a comparator.
s.style.fontSize = "72px"; //we test using 72px font size, we may use any size. I guess larger the better.
s.innerHTML = "mmmmmmmmmmlil"; //we use m or w because these two characters take up the maximum width. And we use a L so that the same matching fonts can get separated
h.appendChild(d);
var defaultWidth = s.offsetWidth; //now we have the defaultWidth
var defaultHeight = s.offsetHeight; //and the defaultHeight, we compare other fonts with these.
h.removeChild(d);
/* test
* params:
* font - name of the font you wish to detect
* return:
* f[0] - Input font name.
* f[1] - Computed width.
* f[2] - Computed height.
* f[3] - Detected? (true/false).
*/
function debug(font) {
h.appendChild(d);
var f = [];
f[0] = s.style.fontFamily = font; // Name of the font
f[1] = s.offsetWidth; // Width
f[2] = s.offsetHeight; // Height
h.removeChild(d);
font = font.toLowerCase();
if (font == "serif") {
f[3] = true; // to set arial and sans-serif true
} else {
f[3] = (f[1] != defaultWidth || f[2] != defaultHeight); // Detected?
}
return f;
}
function test(font){
f = debug(font);
return f[3];
}
this.detailedTest = debug;
this.test = test;
}
WPSE4508_Detector.loadStylesheetIfNeeded = function() {
var hasFont = new Detector().test('Andalus');
alert( 'Testing for font: ' + hasFont );
document.cookie = 'wpse4508_hasfont=' + (hasFont ? 'true' : 'false'); // Maybe add expiry date?
if (!hasFont) {
alert( 'Loading stylesheet via JS' );
var elHead = document.getElementsByTagName('head')[0];
var elLink = document.createElement('link');
elLink.rel = 'stylesheet';
elLink.type = 'text/css';
elLink.href = WPSE4508_Detector.url;
elHead.appendChild(elLink);
}
}
WPSE4508_Detector.loadStylesheetIfNeeded();
style.css, and an extrastyle-with-small-font-size.cssthat you load too for those that don't have your fonts? This will improve the experience for the group that has the fonts. – Jan Fabry Nov 26 '10 at 20:31