TypeKit Webfonts crash a specific Android phone

Anonymous's picture

Anonymous
May 24, 2012
6:44am

Hi, We've recently implemented Typekit on our site to display all text using our 'corporate font' (if anyone is interested, the font is DIN, which looks absolutely beautiful both in print and on screen). However, soon after launching the site itself we found that Typekit fonts cause one specific model of Android phone to crash when the page is loaded. Here's the problem in full:

The HTC Wildfire (also known as the HTC Buzz) was originally released with Android 2.1. It is a very low-end phone, about the equivalent of an iPhone 3G (i.e. not 3GS) but with a low-res screen (240x320px) and a tendency to lag and crash on a regular basis. However, it was updated to Android 2.2, thus making it (in theory) eligible to load TypeKit fonts. In practice, however, the phone's browser crashes before the fonts can be loaded. Speaking from a personal perspective (i.e. I own it), this phone is a piece of junk. Despite this (probably because of cheapskates like me), it is still surprisingly popular in the UK. Obviously, we can't have our site crashing for that many people, so as an interim measure I've disabled TypeKit fonts for Android phones.

What I'd like to do is to edit the below code so it doesn't load for phones that meet the Wildfire's specifications. Here's the original code:

<!--//--><![CDATA[//><!--

try{Typekit.load();}catch(e){}; //--><!]]>    

       I'd like to change it to:       

if (screen.width >= 320) {

<!--//--><![CDATA[//><!-- try{Typekit.load();}catch(e){};

//--><!]]>

}

If I had full access to the head area of my site, I'd obviously be able to do this myself, but with DG I can't. I've also tried using JQuery to remove the external Typekit script from the DOM, but this doesn't work because the variables have already been loaded into memory. I've looked into dynamically refreshing the page after I've removed the relevant code, but this is far too complex for me.

So basically I'm asking for one of two things:

1) Can anyone think of a suitable workaround that allows me to enable Typekit fonts for Android except for specific types of phone?

OR

2) Could someone from DG edit my site's code to what I've provided?

Thanks, 
James
LexAble

Status: Resolved

Comments

Moderator
stacywray May 24, 2012
12:56pm

Hi James,

This particular type of hardware support would fall outside of the scope of services we provide in Gardens; however, if you do a Google search and are able to nail down the code you need to use, you are able to add that code to the header of your site by using the JavaScript Libraries module which I see you have enabled on your site. You should specifically follow the directions for Using JavaScript at the Page Level.

By going to Admin > Configuration > JavaScript Libraries > Custom, you are able to add code to the header region. 

Should you need more extensive assistance with your project, I would suggest reaching out to one of our recommended Drupal Partners.

Thanks!

Best regards,

Stacy Wray | Acquia Senior Support Engineer
 

LexAble (not verified) May 27, 2012
3:45am

The problem is that there's very little I can do once the original code has run - the variables (and hence the fonts) have been loaded into memory. Any attempt to disable the relevant code is pointless because although they are removed from the DOM they remain in the memory. But I'll look into solutions that involve reloading the page with the code removed.

Moderator
stacywray May 29, 2012
12:42pm

Hi LexAble,

Definitely keep us and the rest of the community posted about this.

Thanks very much.

 

Best regards,

Stacy Wray | Acquia Senior Support Engineer
 

This topic has been closed to further comments.

Feedback