Refactor the css for interlanguage links and autonym class

Move it to a seperate css file ext.uls.webfonts.css so that the RL
modules are more granular and clear.

Also get the @font-face css for Autonym font get ready on page load
so that the font applied automatically to any future elements on page.

Change-Id: Icb76df5baedaba8ab613d665a1be923779a6b9e7

Resources.php

@@ -139,6 +139,7 @@ $wgResourceModules['ext.uls.preferences'] = array(
 
 $wgResourceModules['ext.uls.webfonts'] = array(
 	'scripts' => 'resources/js/ext.uls.webfonts.js',
+	'styles' => 'resources/css/ext.uls.webfonts.css',
 	'dependencies' => array(
 		'jquery.webfonts',
 		'ext.uls.init',

resources/css/ext.uls.css

@@ -136,9 +136,3 @@ div.display-settings-block:hover .settings-text {
 .ime-checked .ime-perime-help:hover {
 	opacity: 1;
 }
-
-/* Interlanguage links */
-#p-lang ul,
-.autonym {
-	font-family: 'Autonym', sans-serif;
-}

resources/css/ext.uls.webfonts.css

@@ -0,0 +1,4 @@
+#p-lang ul,/* Interlanguage links */
+.autonym { /* provide autonym class for simplifying the Autonym font usage */
+	font-family: 'Autonym', sans-serif;
+}

resources/js/ext.uls.webfonts.js

@@ -83,6 +83,13 @@
 			}() )
 		} );
 		$( 'body' ).webfonts();
+		// Load the css required for Autonym font. Note that this wont download the font.
+		// Browsers are smart enough to delay it till some element with this font-family
+		// become visible. For eg: If there is a popup div with an element with class
+		// 'autonym', without explicitly calling .webfonts() on it, Autonym font will not
+		// be applied in general. But we ensure that css is ready so that automatically
+		// the font get applied to such future elements.
+		$( 'body' ).data( 'webfonts' ).load( 'Autonym' );
 	};
 
 	$( document ).ready( function () {