Makes font-family names customizable.

This chagne instroduces following variables
that allows authors to customize a font family for each class.
- $serif
- $sans
- $heading-font-family
- $header-title-font-family

This change also adds anotehr custom scss file named "_fonts.scss".
We can use it to override these newly introduced variables.

3 files changed, 19 insertions, 4 deletions

diff --git a/.themes/classic/sass/base/_typography.scss b/.themes/classic/sass/base/_typography.scss
index 60556752..8ef39587 100644
--- a/.themes/classic/sass/base/_typography.scss
+++ b/.themes/classic/sass/base/_typography.scss
@@ -1,17 +1,22 @@
 $blockquote: $type-border !default;
-$mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
+$sans: "PT Sans", "Helvetica Neue", Arial, sans-serif !default;
+$serif: "PT Serif", Georgia, Times, "Times New Roman", serif !default;
+$mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace !default;
+$heading-font-family: "PT Serif", "Georgia", "Helvetica Neue", Arial, sans-serif !default;
+$header-title-font-family: $heading-font-family !default;
 
 // Fonts
 .heading {
-  font-family: "PT Serif", "Georgia", "Helvetica Neue", Arial, sans-serif;
+  font-family: $heading-font-family;
 }
-.sans { font-family: "PT Sans", "Helvetica Neue", Arial, sans-serif; }
-.serif { font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; }
+.sans { font-family: $sans; }
+.serif { font-family: $serif; }
 .mono { font-family: $mono; }
 
 body > header h1 {
   font-size: 2.2em;
   @extend .heading;
+  font-family: $header-title-font-family;
   font-weight: normal;
   line-height: 1.2em;
   margin-bottom: 0.6667em;
diff --git a/.themes/classic/sass/custom/_fonts.scss b/.themes/classic/sass/custom/_fonts.scss
new file mode 100644
index 00000000..073c2be6
--- /dev/null
+++ b/.themes/classic/sass/custom/_fonts.scss
@@ -0,0 +1,9 @@
+// Here you can easily change font faces which are used in your site.
+// To give it a try, uncomment some of the lines below rebuild your blog, and see how it works. your sites's.
+// If you love to use Web Fonts, you also need to add some lines to source/_includes/custom/head.html
+
+//$sans: "Optima", sans-serif;
+//$serif: "Baskerville", serif;
+//$mono: "Courier", monospace;
+//$heading-font-family: "Verdana", sans-serif;
+//$header-title-font-family: "Futura", sans-serif;
diff --git a/.themes/classic/sass/screen.scss b/.themes/classic/sass/screen.scss
index f08da4c2..1899f608 100644
--- a/.themes/classic/sass/screen.scss
+++ b/.themes/classic/sass/screen.scss
@@ -3,6 +3,7 @@
 @include reset-html5;
 
 @import "custom/colors";
+@import "custom/fonts";
 @import "custom/layout";
 @import "base";
 @import "partials";