さくらのレンタルサーバで、モリサワの日本語Webフォントが無料で使える!

以前、モリサワの日本語Webフォントサービス「TypeSquare」をご紹介しました。
このサービスでは、無料で一種類だけフォントが使えるというのが特徴ですが、見出し・本文など、複数のフォントを使いたいというシーンは多いと思います。

そんな中、なんと、さくらインターネットの提供する「さくらのレンタルサーバ」では、モリサワと協同し、30種類のフォントを無料で使えるようになりました。

そして、幸運なことに、このブログ「凪の渡し場」も、さくらのレンタルサーバを使っています。

実はブログ開設のとき、他のレンタルサーバとも比較して迷ったのですが、今回ほど、さくらインターネットにしておいてよかったと思うことはありません。

もちろん、けっしてステマではありませんよ(笑)

むしろ、これを機会に、ほかのレンタルサーバでもさまざまなWebフォントサービスとの提携が広がっていくことを期待しています。

さて、ではさっそくブログ運営者向けに、試したかぎりの使い方をご紹介。
詳しくは公式FAQも参照ください。

ブログ運営者以外の方は、フォントテーマによってどんな違いが生まれるか、スクリーンショットだけでもご覧ください。

Webフォント利用ドメインの設定

まず大事なことは、Webフォントは一つのドメインでしか使えないようです。
サブドメインや、独自ドメインを運用している方は、コントロールパネルにログインして、Webフォントを使いたいドメインを選んでおきます。

プラグインの有効化

次は、Wordpressの管理画面でプラグインを有効化します。

新規に契約した人は、Wordpressをインストールする際に自動でプラグインがインストールされるようですが、既に運営中の場合、「TypeSquare Webfonts さくらのレンタルサーバ」という名前のプラグインをインストールして有効化します。

sakura_webfont_01

プラグインの設定

プラグインを有効化すると「TypeSquare Webfonts」というメニューが設定に現れます。

フォントテーマ設定」で、ブログ全体のフォントテーマを選ぶことができます。
フォントテーマを更新する」をクリックすると、すぐにブログに反映されます。

 sakura_webfont_02

フォントテーマによる違い


sakura_webfont_03

ファッション」を選んでみると、こんな感じ。見出しは以前も使っていた「解ミン 宙」がB(ボールド/太字)になったものなので、けっこう似た雰囲気になっていますね。


sakura_webfont_06

小説」だと、こう。見出ミンとA1明朝という組み合わせ、本当に書籍でよく見られる明朝体を再現できるのは感動的です。


sakura_webfont_05

最後に「モダン」。見出しのすずむしフォントがめちゃめちゃかわいいですね!(^^)

上級者向けのカスタマイズ

見出し、リード、本文として設定するクラス(タグ)をカスタマイズすることもできます。

たとえば、標準では h1,h2,h3, entry-title タグが「見出し」と認識されますが、このブログでは記事中のサブセクションにh3タグを使っているので、h3タグは「見出し」ではなく「リード」のフォントを適用してみることにしました。

カスタムフォントテーマ」では、各クラスに適用されるフォントを自由に組み合わせてカスタムのテーマを作ることもできます。

また、「フォントテーマ個別表示設定」を「表示する」にすると、個別の投稿ページでテーマを切り替えることができます。

このブログのように複数のジャンルで記事を更新している場合、記事によっては、デフォルトで設定したテーマは合わない…ということもあるので、そういうときに重宝しそうです。

ちなみにこの記事は「ニュース」を選んでみました。

要望としては、カテゴリごとにテーマを設定できるようになると便利かもしれません。

これから、ますます日本語Webフォントの世界が広がりそうです!


さくらのレンタルサーバ スタンダードのお申込みはこちら(公式ページ)

Google Fonts がマテリアルデザインを採用してリニューアル

以前に紹介したWebフォントサービスのGoogle Fonts。

それがリニューアルしたということを知ったので、さっそく試してみました。

こちらが以前の Google Fonts

Google Fonts - Choose

そして、こちらが新しい Google Fonts

googlefonts_01

各フォントのサンプルが大きく表示され、右のパネルで検索・フィルタリングすることができます。

使いたいフォントの横の「+」をクリックすると、画面の下にツールバーが出てきます。

googlefonts_03

これをクリックすると、すぐに埋め込み用のコードが表示されます。前よりも流れがスムーズで、使いやすくなっていますね。

 

サンプルのテキストは好きな文字列に編集することができます。

ちなみに今のところ、やっぱり日本語対応フォントは提供されておらず、日本語を入れると文字化けしてしまいます。

googlefonts_04

Google Fonts : Early Access のページはまだリニューアルされていませんが、変わらず Noto Sans Japanese を利用することになります。

 

 Google Design ブログによると、マテリアルデザインというGoogleの新しいデザイン手法に従って作られたそうです。
Reimagining Google Fonts

より楽しくフォントを選ぶことができるようになった Google Fonts の紹介でした。

いきいきとした新世紀の明朝体 – 筑紫明朝

ヒラギノ明朝を紹介したので、次はヒラギノ角ゴ…と予想した方がもしいたら、なかなかわたしと近いフォント観。(フォント観ってなんだ?)

実際そうしようと思っていたのですが、ちょっとおもしろい事例を見つけたので、先に筑紫明朝のお話をします(笑)

 

筑紫明朝(つくしみんちょう)は、マティスと同じ、フォントワークスからリリースされているフォント。

 

フォントワークスの年表を見ると、マティスが1992年のリリース、筑紫明朝は2004年。

マティスと言えば新世紀エヴァンゲリオンですが、フォントワークスとしては新世紀のフォントは筑紫明朝のほうなのですね。

 

おもしろいのは、新しいフォントであっても、むしろ活字のような雰囲気を感じること。

 

いきいきした感じ。

生々しい漢字。

 

本のタイトルや、小説の本文で使われていても、とても映えます。

 

本のタイトルには、むしろバリエーションの筑紫Aオールド明朝のほうをよく見かけますね。

」の字を見比べると、わかってもらえるでしょうか。
オールド明朝のほうが、横棒が太くはじまって細くなっていく、筆遣いが強調されています。

 

さらに筑紫アンティーク明朝というものもあります。

「文」の字のはらいも表現されていて、名前どおり、アンティークな雰囲気をだしたいときにぴったりです。

あっ、ちなみにこの特別展はまだ行けてません。
夏に大阪に巡回するらしいので、その機会を狙ってます。

興味のある方、フォント観の近い方、お誘い合わせの上で行きましょう(笑)

 

さて、筑紫明朝に話を戻して。冒頭に言った、おもしろい事例というのはこちら。

木や石などの天然素材で建物を作る、三角屋のホームページ。

ほぼ日刊イトイ新聞が、最初で最後の「よその会社のホームページを作る仕事」をしたという、このサイト。

訪れてみると、Webフォントで筑紫明朝が(しかも縦書きで!)使われている、というのに嬉しくなりました。

フォントを見るだけで、ものづくりのことをしっかり考えている会社なんだな、と安心します。

 

そんな信頼感も伝える、筑紫明朝のお話でした。

ダイナコムウェアのWebフォントサービス「DynaFont Online」

ダイナコムウェア株式会社は、同社が展開するDynaFont(ダイナフォント)シリーズをWebフォントとして使用できるWebフォントクラウドサービス「DynaFont Online(ダイナフォントオンライン)」の提供を2016年3月29日(火)から開始しました。

情報源: ダイナコムウェアもWebフォントサービス開始「DynaFont Online」 ● type.center


 

今回もWebフォントの話題です。
ダイナコムウェアが、Webフォントサービス DynaFont Online を開始したそうです。

以下のページに、DynaFont Onlineの特徴が説明されています。

DynaFont Online のメリット|Webフォント のご紹介|DynaFont Online

個人・ブロガー、Webデザイナー、プログラマーといった使用者のニーズに合わせた、Webフォント導入のためのツールが紹介されていて、わかりやすいです。

非商用なら、30日間無料体験可能。

 

さて、このサービスでも提供される、DynaFontについて。
他のフォントとの見分け方も簡単。「DF○○」というフォント名なら、DynaFontだよな! と憶えてください。

明朝体・ゴシック体といった基本的なフォントはもちろん、漫画や小説のタイトルロゴで使われるような個性的なデザイン書体も豊富です。

たとえば、DFP優雅宋

ストロークの先端と末端に花文字のような装飾が施されているのがかわいい。
羽海野チカさんの作品「ハチミツとクローバー」のタイトルロゴにも使われています。


 

映画版やアニメ版の公式サイトは、さらに刺繍のような装飾のロゴになっています。

ハチミツとクローバー

 

あとは金文体有名ですね。

 

今回はDynaFont Onlineの紹介でした。

ますますWebフォントの選択肢が広がって、いろいろなサイトで見かけるようになるのが楽しみです。

ウェブページに使われているフォントを調べるツール WhatFont

以前 Web Font の使い方について説明しました。

ところで、あらかじめ使いたいフォントがわかっていればいいのですが、フォントの種類が多すぎて憶えられない、という人は多いと思います。

また、訪れたウェブサイトで、なんだかいいな、と思ったフォントがあったとして。
それが何という名前のフォントなのか知りたくても、調べるのは手間ですよね。

今回は、そんなときに便利な、WhatFont Toolのご紹介。

WhatFont Tool – The easiest way to inspect fonts in webpages ” Chengyin Liu

 

ブックマークレット、Chrome、Safariの機能拡張として提供されています。

Safariの場合、インストールするとツールバーにアイコンが追加されます。

クリックするとフォント検索モードに入り、カーソルを当てたテキストのフォントが自動的にポップアップされます。

Screen Shot WhatFont Mac

ちなみに、↑はフォントや文字に関するいろんな情報が集まった type.center というサイト。
いろんな種類の Web Font を駆使して作られているので、見ているだけで楽しいです。
このツールは iPhone アプリ版もあります。

こちらもSafariの機能拡張として使うので、最初にアクティビティを有効にしておきます。

Screen Shot WhatFont iPhone 1

 

調べたいテキストをドラッグして選択しておいてから、WhatFont をタップすると、フォント情報が表示されます。

Screen Shot WhatFont iPhone 2  Screen Shot WhatFont iPhone 3

 

ぜひ、お気に入りのフォントを見つけてください!