このブログではブログタイトルと日付にGoogle FontのJosefin Sansを指定しています。全体にWeb Fontを指定すると見出しやタイトルなど一部分にフォント指定すると、デザインのアクセントになりおすすめです。今回は日付の表示、数字の表示に最適なGoogle Fontについて書いていきます。
はてなブログテーマMinimal Greenでは日付は
.entry-header .date {font-family: Helvetica, Arial, sans-serif;}
と指定しています。 Arialではこんな感じ。
Helvetica, Arialもとても見やすいフォントなのでこのままでも良いんですが、ちょっとデザインを印象的に見せたい時にはディテールに変化を付けると良いと思うので、日付のデザインを変えてみましょう。
Lato
Google fontのページの説明によると、Latoは ポーランドのデザイナーŁukasz Dziedzic氏が2010年の夏に制作を始められたサンセリフ体のフォントです。Latoはポーランド語で夏を意味します。シンプルでクールでとてもかっこいい英数字フォントです。
Latoを日付に指定するとこんな感じ。
フォント読み込み・指定
head内か、管理画面→デザイン→カスタマイズ→ヘッダ→タイトル下に以下のフォント読み込みを追記します。
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
日付に適応させるには以下のようにフォント指定をします。デザインCSSに追記します。（Minimal Greenではclassを細かく付与しているので!importantが必要ですが、他のテーマでは通常要らないと思います。）
.date { font-family: 'Lato', sans-serif !important; }
Roboto
https://fonts.google.com/specimen/Roboto
「Roboto」は、GoogleのデザイナーChristian Robertson氏によって制作されたフォントです。 Android やChrome OS でのデフォルトフォントとして使用されており、スッキリ幾何学なスタイルが見やすいフォントです。Googleによると”モダンだが親しみやすい、エモーショナルなフォント”だそうです。*1
フォント読み込み・指定
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
デザインCSS
.date { font-family: 'Roboto', sans-serif !important; }
Josefin Sans
https://fonts.google.com/specimen/Josefin+Sans
Josefin Sansはシンプル・ミニマルながらカーブが可愛らしいタイトル向けのフォントです。数字はちょっと個性的で、おしゃれっぽくなります。
フォント読み込み・指定
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
デザインCSS
.date { font-family: 'Josefin Sans', sans-serif !important; }
Montserrat
https://fonts.google.com/specimen/Montserrat
MontserratはJulieta Ulanovskyという女性デザイナーが制作したフォントで、彼女が生まれ育ち、仕事の拠点でもあるアルゼンチン・ブエノスアイレスの区”Montserrat,”がその名の由来でしょう。Montserratを使うとクールで引き締まる感じがします。数字は癖がなく汎用性が高いですね。
フォント読み込み・指定
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
デザインCSS
.date { font-family: 'Montserrat', sans-serif !important; }
以上数字向けの4つのGoogle Fontをご紹介しました。是非はてなブログの日付表示にお使い下さい。
関連記事：
blog.minimal-green.com
blog.minimal-green.com
