diff --git a/Resources.php b/Resources.php
index f5d4d99c..3b82f814 100644
--- a/Resources.php
+++ b/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',
diff --git a/resources/css/ext.uls.css b/resources/css/ext.uls.css
index 812865cb..7eaac41a 100644
--- a/resources/css/ext.uls.css
+++ b/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;
-}
diff --git a/resources/css/ext.uls.webfonts.css b/resources/css/ext.uls.webfonts.css
new file mode 100644
index 00000000..07c78082
--- /dev/null
+++ b/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;
+}
diff --git a/resources/js/ext.uls.webfonts.js b/resources/js/ext.uls.webfonts.js
index 91b240b9..0ea538ed 100644
--- a/resources/js/ext.uls.webfonts.js
+++ b/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 () {