Google Font API with locally hosted fallback - font-face

I am using the Google Font API to load a font (CSS, not font loader) for a project that I'm working on. However, we cannot guarantee that the user who uses the website & device will always have internet connectivity.
We are using fallbacks for the loading of jQuery from a CDN but would like to implement a fallback for the font too. It is preferred that the font is loaded from the Google Font API if it is available to reduce load on the device that the website is running from, but if there is no internet connectivity we would like to fallback to the local copy. We have the local copy with stylesheets etc from FontSquirrel so integrating it is no problem.
What I would like to know is if there is a way to check if the font has loaded successfully from the Google Font API and if not to include the local CSS for it.

Related

Wikipedia not loading images on modern browsers

Wikipedia is a useful source of info but is less effective without images.
Due to security measures, modern browsers (latest updates of Firefox/Chrome/Safari) are not showing images which have origin different from that of host. eg: wikipedia.org page content is hosted on en.wikipedia.org but the media are hosted on upload.wikimedia.org, so the browsers are blocking all images.
I tried turning off browser security settings, adding wikipedia as exception, turning off https only requirement, altering site permissions, viewing on android wikipedia app (yes, even this fails as it can be a webview, thus using chrome browser internally to display content), etc. but to no avail.
What could be done to view the images on wikipedia?
Update: This issue has been resolved automatically (probably by wikimedia).

Is there a way in Safari to let https images load on the page without it having a secure connection?

When loading the site in Safari, I have some images that use a https link, the images do not display on the page, when I open the image URL in the browser, it will not load, saying "Safari can't open the page X because Safari can't establish a secure connection to the server X". This needs to use https links for the images, is there a header or something I can set to allow this to load?
I have tried removing the https, and images load in http, the site we get the images from are used from an API and they they return the image link to use, this does not have an SSL cert on it
not any code, a general question about a setting in Safari if we can avoid using any manual changes that a user will not make on their own.
Expect that the image will load up and thus on the pages that we want to display the images on.
I found a solution to this one here:
https://apple.stackexchange.com/questions/275522/unable-to-load-https-websites-on-safari
The issue is that Safari won't support in older versions the TLS protocol in use in modern-day browsers. I wasn't aware it would be such an old version in use for windows users.

Google App Engine & Images server

I'm having difficulties understanding if my idea of an image gallery will work as I can't seem to get it working.
What I have:
An Google App Engine running with a simple website that serves products where each product can have images
A Google Storage bucket with 1.000.000's images
What I planned to do:
Add a CDN & Load balancer to the Google Storage bucket to serve the images worldwide fast on a subdomain.
Status: This works. At least it serves the images.
Problems:
But I have the feeling that the architecture is not right as the Google App Engine can't be put behind the same load balancer & CDN to serve all the static content via this CDN. And I see no way to add the content caching headers. The documentation of Google says I should be able to add cache keys in the loadbalancer config. But I've been 10 times through this config and the back-end bucket config but no luck to find any. Also in the app.yaml of the Google App Engine you can't set this as the images are not servered via the App Engine....
So questions:
Is it logical in this setup to have a GAE and a separate load
balancer with a storage bucket with the images?
How do I add cache-control headers to the CDN/bucket config of Google Cloud CDN?
Assuming that the GCS bucket setup you already have in place allows you to serve an image via the CDN & Load balancer as you desire, let's say on a URL like gs://www.example.com/img.png then handling such request will already include all the required cache control.
If so then in your GAE app-provided pages, instead of referencing an image via a relative path to your site, like <img src="/static/img.png">, which would indeed require handling its own cache management inside the GAE app code, you could simply reference the image via its corresponding URL in the existing CDN setup: <img src="gs://www.example.com/img.png">, with all cache control already included.
Note: I didn't actually try it (I don't have such GCS CDN setup), but I see no reason for which this wouldn't work.

Image server HTTP vs HTTPS in IIS

Using IIS6 on win2003, if I have an image server is it more efficient to serve up images as http than https? Also is it possible to serve up images as http on a webpage than is https.
Like if this html file: Secure.html is on a server that forces https to be used, but inside https://www.myultrahighsecurewebsite.com/Secure.html/
and I have a image like so:
<img src="http://www.notsosecureatall.com/imagecode/serveupanimage.aspx?id=1&auth=1" />
Is this a good way to serve up images? Is there a better way? Also I wanted to have a defacto site to serve up images so I don't have to push images as well as code and markup between development and live. Should the images or certain type of images like tiff, png, svg, etc... be on https vs http or does it matter?
If I do implement an image server or a page dedicated to keeping track of images, I just want an easy system to push images from development to my production environment without getting snagged on installation problems. But also not having to worry about customers having access to images until a version has been properly approved.
It will be more efficient from a CPU (client & server) and network point of view to use plain old HTTP. You'll avoid the overhead of TLS traffic and encryption/decryption of data.
The scenario (mixed HTTP/HTTPS) you present will often annoy a user though. You'll get a warning similar to "This page has unsecured content" (this is getting at the HTTP-only images).
See Loading http content on https website for more info (and additional gotchas) on the previous paragraph.
Are you sure that you need to worry about efficient loading of images? Don't overengineer this. Please share some more details if you've noticed that this is a problem.

caching kills links (jquery mobile on iPad)

I am working on a webapplication that uses caching to make it available offline. Everything works fine when running it chrome (offline and online). But when I run it on iPad the links don't work anymore and I get failed to load page everywhere. Removing the caching makes the links work again so it obviously has something to do with the caching. Navigating directly to the seperate pages of the webapp also works fine in Safari, its the link that causes the error. By default all links are loaded with AJAX in jQuery Mobile. Changing this by adding rel="external" also fixes the problem, but obviously I don't want to do that.
To enable caching I added this code: and created a manifest file with ALL the files (scripts, css, images, html). Does anyone know what the problem could be?
I've experienced this as well while working with caching using manifests. What I discovered was that there Chrome has no limits. iPad and iPhone do. This appears to be pretty small, around 5mb. Try removing images as much as possible and using YUI Compressor on your scripts.
Ajax requests can be cached actually, the system doesn't care if the request is by AJAX or normal full request. All you have to do is put the URLs you wanted to retrieve by ajax into the manifest like the rest of the assets.
Hope this helps

Resources