Google Fonts Flash in Internet Explorer - css

I just set up Google Fonts API on my site. Internet Explorer, whenever I refresh the page, a default font flashes before the Google Font 'Reenie Beanie' loads. But shouldn't this be sticking in the cache or something so that once it loads once, it's there and no longer should default fonts show up?
I'm using the WebLoader version to call the fonts. I originally just used the <link> call to the fonts, but the problem there was switching to an https page - I had to use the https link, but then I think that stopped the fonts from caching too. Everything is fine in Firefox (no flashing).
Any suggestions on this?
www.n-styleid.com

Everything is working as it should (In the worst sense of the words)
This is just a problem IE is having with its rendering engine. It cannot download/retrieve the fonts and render them as fast as the basic built-in fonts that the OS has.
There really is no good way to fix this as it is not something that you broke. The best advice that I can give you is to find a font in the system that looks closest to it (Not many handwritten in the system but better than arial) and use that in your font stack.
Hope that helps.

A work around is to hide the element with css and fade it in with jquery. This will give your font time to load. Its a good idea to use a decent fallback if the content is vital.

Related

Wordpress/Elementor Website Blazing Fast on Chrome but Laggy on Safari on Mac

I just set up my page using WordPress and Elementor and the page is very fast using Chrome. When using Safari on Mac, however, the page becomes super laggy and the CPU ramps up. I already tried using Autoptimize, W3, and Jetpack, to now avail.
Google PageSpeed says the issues lies in Javascript, however, I do not know how to optimize that. I tried using Asset CleanUp, but I already disabled all the non crucial plugins and animations.
Thanks!
The URL is: melius.live
At the bottom of your site you have three videos. Remove them and try to lazy load the iframes.
Check everything at W3 Total Cache > "User Experience".
You also can look in the Safari Inspector at Network > Waterfall to see which parts take a long time. Maybe your Mac Machine is just weak.
Try using a different video plugin. More or less problem is with the Videos as it is generating code that is being blocked by the browsers.

Rubik font not rendering anymore

I have got a website running with the Google Fonts Rubik for ages. This morning it appears that this font is not rendering anymore on my desktop (Chrome, Firefox, Opera) and several others, coming up fine on my Smartphone. I switched to Roboto for the time being.
Any idea ?
This http://www.mejoresdatos.cl/FontIssue.aspx shows what shown below:
Same problem here it only happens on Windows 7 Machines no matter the browser. OSX and all mobile devices I have tested on it is working on.
https://fonts.google.com/?query=Rubik. See this is not even working here. Temporarily you can try embedding the font through CSS. Till google solves this.
I had the same issue, what worked for me was simply to force a new fetch rather than rely on the cache.
i.e. I added the parameter &cache=clear to the font.googleapis.com URL:
#import 'https://fonts.googleapis.com/css?family=Rubik:400,500,700,900&cache=clear';

Is it possible to always load a custom style sheet for a certain website in Chrome?

I'm reading the guide/documentation for Android at http://developer.android.com/guide/components/loaders.html on Google Chrome on Windows.
I have made certain changes with Chrome Developer Tools like
Changed body background to grey
Changed monospaced font from courier new to consolas
for easier reading. For some reason this site doesn't obey Chrome font setting rules, even though other sites do. So I have to manually go in and change the monospace font from courier new to consolas.
But these changes go away as soon as the page is reloaded. Is it possible to make these changes permanent ?
You can handle the settings > Show Advanced Settings> Web Content> Customize fonts. I am on mac but there should be something equivalent to pc. Also, to run your own css, just use any extension from the web store. One of the many is Style Chooser

IE8 doesn't display embedded web fonts -- on any site

From what I understand, IE 8 should display embedded fonts, however my version substitutes generic fonts -- not just for my code, but on other sites, even when the CSS is properly IE-hacked (for example, this sample displays all the IE-hacked properties for me (shadows, etc.), except for the embedded font).
I'm wondering if there is a setting in IE8 that would cause this? I'm on a heavily locked-down work computer (this is why I'm using IE8), so that may have something to do with it, though I'm not sure why this would affect font-face specifically.
Any help would be greatly appreciated!
From http://msdn.microsoft.com/en-us/library/ms533034(v=vs.85).aspx
On the View menu, click Options and then click the Security tab.
Select Custom and click Settings.
Scroll to the Downloads section.
Change the Font Download setting from Disable to Enable.

css not loading in ipad

Recently someone pointed out that my personal site was not working on ipad, because of the fact that the css did not load. How is this possible? On iphone the system works ok and also on any other platform. Could it be because I load all my stylesheets through one master.css for faster download times.
My personal website is:
webofdreams.ro
Did anyone encountered the same problem ever?
I dont think thats actually "faster". its best to put all your css into one sheet for minimal http requests.
As a sidenote, it loads on my ipad but you have a semi-transparent div blocking everything.

Resources