fix issues with font-family with spaces; add caecilia

3 files changed, 24 insertions, 3 deletions

diff --git a/css/reader.css b/css/reader.css
index a9f707e..196f747 100644
--- a/css/reader.css
+++ b/css/reader.css
@@ -12,3 +12,21 @@ a:focus {
 	color: #00302c;
 	text-decoration: underline;
 }
+
+@font-face {
+	font-family: Caecilia;
+	src: local('PMN Caecilia 55');
+	font-weight : normal;
+}
+
+@font-face {
+	font-family: Caecilia;
+	src: local('PMN Caecilia 75');
+	font-weight : bold;
+}
+
+@font-face {
+	font-family: Caecilia;
+	src: local('PMN Caecilia 56');
+	font-style : italic;
+}
diff --git a/js/read.js b/js/read.js
index de75072..90e97fb 100644
--- a/js/read.js
+++ b/js/read.js
@@ -214,7 +214,7 @@ function init_reader() {
 			rendition.themes.default({
 				html: {
 					'font-size': fontSize,
-					'font-family': fontFamily,
+					'font-family': "'" + fontFamily + "'",
 					'line-height': lineHeight,
 					'text-align': 'justify'
 				}
@@ -865,9 +865,11 @@ function apply_styles() {
 		const lineHeight = res[2] ? res[2] + "%" : DEFAULT_LINE_HEIGHT + "%";
 		//const themeName = res[3] ? res[3] : false;
 
+		console.log('style', fontFamily, fontSize, lineHeight);
+
 		$.each(window.book.rendition.getContents(), function(i, c) {
 			c.css("font-size", fontSize);
-			c.css("font-family", fontFamily);
+			c.css("font-family", "'" + fontFamily + "'");
 			c.css("line-height", lineHeight);
 		});
 
diff --git a/read.html b/read.html
index 46b3fdd..8ba395a 100644
--- a/read.html
+++ b/read.html
@@ -39,7 +39,8 @@
 					<div class="col-sm-9">
 						<select class="font_family form-control" onchange="apply_font(this)">
 							<option>Arial</option>
-						 	<option>Times New Roman</option>
+							<option>Caecilia</option>
+							<option>Times New Roman</option>
 							<option>Georgia</option>
 							<option>Courier New</option>
 						</select>