はんこキャプターやぁのん

好きなものを堂々と好きでいたい。私の興味を綴るブログ。

  ↓各ジャンルの他ブログが読めます↓
にほんブログ村 その他趣味ブログへ にほんブログ村 コレクションブログ スタンプ・風景印へ にほんブログ村 鉄道ブログ 鉄道ぶらり旅へ にほんブログ村 その他趣味ブログ その他珍しい趣味へ

はてなブログでTypeSquareのWebフォントを導入

記事名と
URLをコピー

当ブログでは、TypeSquare(タイプスクウェア)のWebフォントを使用しています。

TypeSquareは、印刷物でも使われている、フォントメーカーの株式会社モリサワが運営しています。

私のブログは条件をクリアしていたので、無料で使用できています。(条件はコチラでご確認を。)

有料になるくらいこのサイトが盛り上がることがあれば、嬉しい悲鳴なんだけど。笑

使用手順

Webフォント TypeSquare [タイプスクウェア]

  • 会員登録後、マイページにて、使用したいフォントサイト等を設定。
  • プラン設定詳細内の「プラン専用タグ」をコピー。
  • 自分のブログの「設定」「詳細設定」「headに要素を追加」の一番下に貼り付け。
  • 自分のブログの「デザイン」「カスタマイズ」「デザインCSS」に、フォントを適用させるコードを追記。

当ブログでは、以下のコードを使っています。 

body{
  font-family:"ヒラギノUD丸ゴ W6 JIS2004";
}

ヒラギノUD丸ゴ W6 JIS2004」を選んでみました。

適用範囲

先述のコードでは、本文だけでなく、サイト全体にフォントが適用されます。

ただ、後から読みこまれた部分には、文字が反映されないみたいです。(当ブログでは、コメント欄、注目記事欄などが、部分的に別フォントで表示される。)今は無料版を使っているので、仕方ないです。

JavaScriptなどで後から追加した文字に、TypeSquareを適用することはできますか? – TypeSquare

参考画像

f:id:yaanon:20210119181205j:plain

このフォントを選んだ経緯などは、改めて別の記事に書きます。