Mediawiki and Google fonts

The recommended method for loading Google fonts via CSS is a series of @import directives, which according to CSS syntax must come first in the script. It's not easy to guarantee this on a wiki where the resource loader is used, because it concatenates lots of scraps of CSS needed for the current page into one compressed lump, in a seemingly arbtrary order. The symptoms can be that the fonts are loaded on simple pages, but on a complex page – e.g., one that has citations – the @import directives no longer come first in the resource loader's slab of stuff, so the fonts are no longer loaded. Alternatively, everything works when the machinations of the resource loader are suppressed by setting $wgResourceLoaderDebug = true, but not otherwise.

It's best to avoid downloading and embedding the sequence of @font-face declarations that Google serves up for the imported scripts, because those declarations sneakily depend on the client's brower. So the best solution is to add a CSS file containing the Google @imports to the page head explicitly.

I created a file skins/Winkel/google-fonts.css containing the following:

@import url("https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i");
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i');
@import url('https://fonts.googleapis.com/css?family=UnifrakturCook:700');

Then in skins/Winkel/includes/WinkelTemplate.php, add the following line to method getSkinData:

    $out->addStyle('Winkel/google-fonts.css');

And Bob's your uncle!

Update

The right place to put the addStyle call is in the hook onBeforePageDisplay.