jquery: switch font to self-hosted Cairo

Fixes gh-446

Author: timmywil

themes/jquery/css/base.css

@@ -113,10 +113,10 @@ body {
 
 @font-face {
   font-family: 'FontAwesome';
-  src: url('fonts/fontawesome-webfont.eot?v=3.0.2');
-  src: url('fonts/fontawesome-webfont.eot?#iefix&v=3.0.2') format('embedded-opentype'),
-    url('fonts/fontawesome-webfont.woff?v=3.0.2') format('woff'),
-    url('fonts/fontawesome-webfont.ttf?v=3.0.2') format('truetype');
+  src: url('fonts/FontAwesome/fontawesome-webfont.eot?v=3.0.2');
+  src: url('fonts/FontAwesome/fontawesome-webfont.eot?#iefix&v=3.0.2') format('embedded-opentype'),
+    url('fonts/FontAwesome/fontawesome-webfont.woff?v=3.0.2') format('woff'),
+    url('fonts/FontAwesome/fontawesome-webfont.ttf?v=3.0.2') format('truetype');
   font-weight: normal;
   font-style: normal;
 }
@@ -184,7 +184,7 @@ h6 {
 
 h1, h2, h3, h4, h5, h6 {
 	font-weight: 700;
-	font-family: "klavika-web", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif !important;
+	font-family: Cairo, "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif !important;
 }
 /*
  * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome.
@@ -676,14 +676,30 @@ table {
 }
 
 #content th {
-	font-family: "klavika-web", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
+	font-family: Cairo, "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
 }
 
 #content th,
 #content td {
 	padding: .5em;
 }
 
+/* ==========================================================================
+   Cairo Font
+   ========================================================================== */
+
+@font-face {
+	font-family: Cairo;
+	src: url(fonts/Cairo/Cairo-Regular.ttf) format("truetype");
+	font-weight: normal;
+}
+
+@font-face {
+	font-family: Cairo;
+	src: url(fonts/Cairo/Cairo-Bold.ttf) format("truetype");
+	font-weight: 700;
+}
+
 /* ==========================================================================
    Font Awesome
    ========================================================================== */
@@ -1624,14 +1640,14 @@ nav#main ul {
 
 nav#main li {
 	float: left;
-	font: normal normal 16px "klavika-web", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
+	font: normal 700 16px Cairo, "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
 	margin-right: 2px;
 }
 
 nav#main li a {
 	color: #fff;
 	text-decoration: none;
-	padding: 6px 10px;
+	padding: 2px 10px;
 	display: block;
 	border: 1px solid transparent;
 	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.76);
@@ -1824,7 +1840,7 @@ pre b {
 	height: 19px;
 	width: 19px;
 	padding-top: 0;
-	font: bold 11px/19px "klavika-web", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
+	font: bold 11px/19px Cairo, "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
 	border-radius: 12px;
 }
 
@@ -1907,7 +1923,7 @@ pre b {
 
 #content figcaption {
 	box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.20);
-	font: italic 700 12px/20px "klavika-web", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
+	font: italic 700 12px/20px Cairo, "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
 	padding: 10px 5px;
 	color: #737272;
 	clear: both;
@@ -1979,7 +1995,7 @@ pre b {
 
 p.author {
 	color: #ababab;
-	font-family: "klavika-web", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
+	font-family: Cairo, "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
 	font-weight: 700;
 	margin-top: -20px;
 }
@@ -1993,7 +2009,7 @@ p.author a {
 	padding-bottom: .5%;
 	margin-bottom: 20px;
 	font-weight: 700;
-	font-family: "klavika-web", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
+	font-family: Cairo, "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
 	color: #666;
 	background: url(../images-foundation/gauze.png) #f0f0f0;
 	text-shadow: 0 1px 0 #ffffff;
@@ -2016,15 +2032,15 @@ p.author a {
 }
 
 #banner-large-image h1, #banner-large-image h2 {
-	font: bold 60px/60px "klavika-web", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
+	font: bold 60px/60px Cairo, "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
 	margin-bottom: 0;
 	color: #fff;
 	text-shadow: 0 0 4px rgba(0, 0, 0, 0.85);
 }
 
 #banner-large-image p {
 	color: #cccccc;
-	font: 700 normal 24px/36px "klavika-web", "Helvetica Neue", sans-serif;
+	font: 700 normal 24px/36px Cairo, "Helvetica Neue", sans-serif;
 }
 
 #banner-secondary {
@@ -2121,7 +2137,7 @@ input[type="submit"] {
 	color: #fff !important;
 	text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.35);
 	padding: 8px 15px;
-	font: bold 16px/16px "klavika-web", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
+	font: bold 16px/16px Cairo, "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
 	transition: all 0.2s;
 	background-color: #d18f4f;
 	float: left;
@@ -2508,7 +2524,6 @@ footer .books li a cite {
 	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
 	letter-spacing: 0;
 	border-radius: 5px 5px 0 0;
-	font-weight: normal;
 	margin-bottom: 0;
 	overflow: hidden;
 }

themes/jquery/css/fonts/Cairo/Cairo-Bold.ttf

@@ -24,7 +24,7 @@
 
 .sri-modal .ui-dialog-title {
 	text-align: center;
-	font-family: "klavika-web", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
+	font-family: Cairo, "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
 	font-weight: 400;
 	width: 100%;
 }

themes/jquery/css/fonts/Cairo/Cairo-Regular.ttf

@@ -25,8 +25,6 @@
 	<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
 	<script src="<?php echo get_template_directory_uri(); ?>/js/plugins.js"></script>
 	<script src="<?php echo get_template_directory_uri(); ?>/js/main.js"></script>
-	<script src="https://use.typekit.net/wde1aof.js"></script>
-	<script>try{Typekit.load();}catch(e){}</script>
 <?php
 	if ( get_option( 'thread_comments' ) && comments_open() ) {
 		wp_enqueue_script( 'comment-reply' );