Fixing Thesis theme to workaround Google Fonts crashing iPad Safari

The latest version of Thesis theme (v1.8) for WordPress comes with built in support for Google Fonts. It’s nice and very easy to start using, but… not sure if you’ve noticed it already but use of Google Fonts (and other web “unsafe” fonts) may crash iPad’s Safari. This definitely is not something your visitors should experience visiting your web site.

So, I didn’t want to give up using extra fonts so I decided to modify Thesis a bit.

Patching Thesis

Import statement for Google Fonts is added as an include to layout.css. Thesis does a good job creating a custom layout.css when you save your preferences so it can be served without additional performance penalties. So, in order to conditionally serve CSS with or without Google Fonts, I first modified Thesis to generate additional layout_safe.css.

Change to functions.php:

...
if (file_exists(THESIS_CUSTOM)) {
  define('THESIS_CUSTOM_FOLDER', get_bloginfo('template_url') . '/custom');
  define('THESIS_LAYOUT_CSS', THESIS_CUSTOM . '/layout.css');
  define('THESIS_LAYOUT_SAFE_CSS', THESIS_CUSTOM . '/layout_safe.css');
  define('THESIS_ROTATOR', THESIS_CUSTOM . '/rotator');
  define('THESIS_ROTATOR_FOLDER', THESIS_CUSTOM_FOLDER . '/rotator');
}
elseif (file_exists(TEMPLATEPATH . '/custom-sample')) {
  define('THESIS_SAMPLE_FOLDER', get_bloginfo('template_url') . '/custom-sample');
  define('THESIS_LAYOUT_CSS', TEMPLATEPATH . '/custom-sample/layout.css');
  define('THESIS_LAYOUT_SAFE_CSS', THESIS_CUSTOM . '/layout_safe.css');
  define('THESIS_ROTATOR', TEMPLATEPATH . '/custom-sample/rotator');
 define('THESIS_ROTATOR_FOLDER', THESIS_SAMPLE_FOLDER . '/rotator');
}
...

I added lines 5 and 12 that define THESIS_LAYOUT_SAFE_CSS.

Next I modified lib/classes/css.php that generates layout CSS:

...
class Thesis_CSS {
public $build_safe = false;
...
// Import CSS for applicable Google fonts
 if($this->build_safe == false)
$this->css .= (is_array($google_fonts) ? $this->stacks->import_css($google_fonts) . "\n" : '');

// Calculate line heights
 ...
}

function thesis_generate_css() {
 if (is_writable(THESIS_LAYOUT_CSS)) {
  $thesis_css = new Thesis_CSS;
  $thesis_css->build();
  $lid = @fopen(THESIS_LAYOUT_CSS, 'w');
  @fwrite($lid, $thesis_css->css);
  @fclose($lid);
 }
 if (is_writable(THESIS_LAYOUT_SAFE_CSS)) {
  $thesis_css = new Thesis_CSS;
  $thesis_css->build_safe = true;
  $thesis_css->build();
  $lid = @fopen(THESIS_LAYOUT_SAFE_CSS, 'w');
  @fwrite($lid, $thesis_css->css);
  @fclose($lid);
 }
}

I added lines 3, 6 (to add include to Google fonts only if we’re building “unsafe” CSS) and 21-28 (creating extra CSS file names layout_safe.css).

Note: You’ll need to create an empty layout_safe.css in your Thesis’ custom directory and make it writable by web server.

The next time when Thesis design options are saved, layout_save.css will be overridden with the CSS.

At the end, edit function stylesheets() in lib/classes/head.php to server layout_safe.css instead of layout.css when visitor is using iPad (or iPhone):

...
$layout_path = "$path/layout.css";
$custom_path = "$path/custom.css";
$layout_url = "$url/layout.css";
$custom_url = "$url/custom.css";

if(isset($_SERVER['HTTP_USER_AGENT']) && preg_match("/iPad|iPhone/", $_SERVER['HTTP_USER_AGENT'])) {
  $layout_path = "$path/layout_safe.css";
  $layout_url = "$url/layout_safe.css";
}
...

I added lines 7-10.

With these changes CSS server to iPad/iPhone users will not have import statement for Google fonts, falling back to default web-safe fonts.

Check caching plugins

There’s one more thing… If you’re using WPSuperCache (or some WordPress caching plugin) make sure you edit .htaccess and add iPad to the list of user agents which are handled as mobile devices.

Using Java? Speed-up bug fixing and improve customer satisfaction using LogDigger to create detailed error reports and notifications for your web application

Tagged as: Thesis, Wordpress