最近Google Noto Fontsはアジア系文字をサポートし始めたので、Octopressのデフォルトフォントを変えてみようと思いました。
やり方
1. Google Noto Fonts ここからフォントをダンロード。
2. /source/fontsを作ります。
3. 先ダンロードしたファイルを解凍し、好きなフォントを/source/fontsに入れます。私の場合、日本語と英語を合わせて10個入れました。NotoSans系とNotoSerif系とNotoSansJP-Bold、NotoSansJP-Regular。
4. ソースを修正。/sass/custom/_fonts.scssに、次のコードを追加します。完成。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
$sans: "Noto Sans", sans-serif;
$serif: "Noto Serif", "Noto Sans" serif;
$heading-font-family: "Noto Serif", sans-serif;
$header-title-font-family: "Noto Sans JP", "Noto Serif", sans-serif;
$header-subtitle-font-family: "Noto Sans JP", "Noto Serif", sans-serif;
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 400;
src: local('NotoSans-Regular') url(/fonts/NotoSans-Regular.ttf) format('truetype');
}
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 700;
src: local('NotoSans-Bold') url(/fonts/NotoSans-Bold.ttf) format('truetype');
}
@font-face {
font-family: 'Noto Sans';
font-style: italic;
font-weight: 400;
src: local('NotoSans-Italic') url(/fonts/NotoSans-Italic.ttf) format('truetype');
}
@font-face {
font-family: 'Noto Sans';
font-style: italic;
font-weight: 700;
src: local('NotoSans-BoldItalic') url(/fonts/NotoSans-BoldItalic.ttf) format('truetype');
}
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 400;
src: local('NotoSansJP-Regular') url(/fonts/NotoSansJP-Regular.otf) format('truetype');
}
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 700;
src: local('NotoSansJP-Regular') url(/fonts/NotoSansJP-Bold.otf) format('truetype');
}
@font-face {
font-family: 'Noto Serif';
font-style: normal;
font-weight: 400;
src: local('NotoSerif-Regular') url(/fonts/NotoSerif-Regular.ttf) format('truetype');
}
@font-face {
font-family: 'Noto Serif';
font-style: normal;
font-weight: 700;
src: local('NotoSerif-Bold') url(/fonts/NotoSerif-Bold.ttf) format('truetype');
}
@font-face {
font-family: 'Noto Serif';
font-style: italic;
font-weight: 400;
src: local('NotoSerif-Italic') url(/fonts/NotoSerif-Italic.ttf) format('truetype');
}
@font-face {
font-family: 'Noto Serif';
font-style: italic;
font-weight: 700;
src: local('NotoSerif-BoldItalic') url(/fonts/NotoSerif-BoldItalic.ttf) format('truetype');
}
|