Browse code
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.
MORITA Hajime (omo) authored on 24/10/2011 at 09:22:46Showing 3 changed files
- .themes/classic/sass/base/_typography.scss
- .themes/classic/sass/custom/_fonts.scss
- .themes/classic/sass/screen.scss
| ... | ... |
@@ -1,17 +1,22 @@ |
| 1 | 1 |
$blockquote: $type-border !default; |
| 2 |
-$mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; |
|
| 2 |
+$sans: "PT Sans", "Helvetica Neue", Arial, sans-serif !default; |
|
| 3 |
+$serif: "PT Serif", Georgia, Times, "Times New Roman", serif !default; |
|
| 4 |
+$mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace !default; |
|
| 5 |
+$heading-font-family: "PT Serif", "Georgia", "Helvetica Neue", Arial, sans-serif !default; |
|
| 6 |
+$header-title-font-family: $heading-font-family !default; |
|
| 3 | 7 |
|
| 4 | 8 |
// Fonts |
| 5 | 9 |
.heading {
|
| 6 |
- font-family: "PT Serif", "Georgia", "Helvetica Neue", Arial, sans-serif; |
|
| 10 |
+ font-family: $heading-font-family; |
|
| 7 | 11 |
} |
| 8 |
-.sans { font-family: "PT Sans", "Helvetica Neue", Arial, sans-serif; }
|
|
| 9 |
-.serif { font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; }
|
|
| 12 |
+.sans { font-family: $sans; }
|
|
| 13 |
+.serif { font-family: $serif; }
|
|
| 10 | 14 |
.mono { font-family: $mono; }
|
| 11 | 15 |
|
| 12 | 16 |
body > header h1 {
|
| 13 | 17 |
font-size: 2.2em; |
| 14 | 18 |
@extend .heading; |
| 19 |
+ font-family: $header-title-font-family; |
|
| 15 | 20 |
font-weight: normal; |
| 16 | 21 |
line-height: 1.2em; |
| 17 | 22 |
margin-bottom: 0.6667em; |
| 18 | 23 |
new file mode 100644 |
| ... | ... |
@@ -0,0 +1,9 @@ |
| 0 |
+// Here you can easily change font faces which are used in your site. |
|
| 1 |
+// To give it a try, uncomment some of the lines below rebuild your blog, and see how it works. your sites's. |
|
| 2 |
+// If you love to use Web Fonts, you also need to add some lines to source/_includes/custom/head.html |
|
| 3 |
+ |
|
| 4 |
+//$sans: "Optima", sans-serif; |
|
| 5 |
+//$serif: "Baskerville", serif; |
|
| 6 |
+//$mono: "Courier", monospace; |
|
| 7 |
+//$heading-font-family: "Verdana", sans-serif; |
|
| 8 |
+//$header-title-font-family: "Futura", sans-serif; |