Webフォントを使う場合のメモ

サイトにGoogleウェブフォントを埋め込む手順をメモしておきます。まずは利用するフォントを決めますが、今回はMplus1Pというフォントを使うことを前提に考えます。

まずは、下記のサイトを参考にしてCSSへのリンクを作ります。

Google Fonts + 日本語 早期アクセス

そこで下記のリンクをテンプレートファイルに埋め込みます。今回はHelix3というフリーテンプレートを使います。テンプレート管理からShaper_helix3の詳細とファイルというのを見つけて、そこから各ファイルの修正ページを選び index.php のファイルを開きます。その中の <head> タグの下に下記を記入します。

<link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" />

その後CSSのBODYタグを書き換えるのですが、Helixの場合テンプレートの管理画面から追加出来るので今回はその機能を使います。

screenshot gohangumi.jp 2017 11 22 00 36 35 469

 

書き込んだコードは下記ですが、状況に合わせて調整してください。

 

body {
font-family: "Mplus 1p";
font-size: 15px;
color: #555;
line-height: 30px;
font-style: normal;
font-weight: 300;
}

 


印刷   メール