I already have the following for the JS files:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">!window.jQuery && document.write(unescape("%3Cscript src='/app_shared/script/jquery-1.6.1.min.js' type='text/javascript'%3E%3C/script%3E"))</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script type="text/javascript">!window.jQuery.ui && document.write(unescape("%3Cscript src='/app_shared/script/jquery-ui.min.js' type='text/javascript'%3E%3C/script%3E"))</script>
How can I go for something similar for a theme? I can download it from the cdn like this:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
But how can I detect if the file was downloaded, to reference a local copy on failure?
I know how to add the local copy programatically with jQuery, but I don't know how to check whether the CSS download succeded. Also, are <link> tag downloads blocking, or are they async? That'd be a problem, too.
You could do a style check where a font should be a particular family and then check against that family name. If the name is not what you expect then load the local copy.