Google FontsなどのWebフォントを使う

タグの埋め込み機能を使うとWebフォントも利用できます。
タグの埋め込み機能は、レギュラープラン以上の有料プラン、もしくはオプション契約が必要です。
ペライチの機能でフォントを変更する場合は、フォントを変更するにはをご確認ください。

Webフォントについて

Web上のフォントのデータを使用するため、自分以外の環境でも同じフォントでWebサイトが表示できます。

Google FontsとはGoogleが提供するWebフォントのサービスです。

注意点

Webフォントを使用する際はフォントの利用規約をご確認ください。
有料のフォントや利用用途に制限のあるフォントもあります。

フォントが適用されない文字はデフォルトのフォントで表示されます。
閲覧環境によって指定したフォントで表示されないことがあります。

Webフォントを使用することによって、ペライチのフォント変更で設定したフォントが適用されない場合があります。

フォントによって、そのフォントが使える文字が異なります。
また、意図しない文字になる場合があります。

下記でご案内する手順はGoogle Fontsの設定方法の一例です。
ペライチではGoogle Fontsやその他のWebフォントサービスの詳細や設定方法についてご案内できません。

利用手順

Google Fontsでフォントを探す

  1. Google Fontsにアクセスする。
  2. フォントを探す。
    __________2020-06-10_19.28.02.png
  3. 選択したフォントの「＋ Select this style」をクリックする。
    __________2020-06-10_19.29.24.png
  4. 「To embed a font, copy the code into the <head> of your htm」の<link>のコードをコピーし、メモ帳(Windows)やテキストエディタ(Mac)などに一旦貼り付ける。
    __________2020-06-10_19.30.54.png
    例（選択したフォントによって異なります）
    <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
  5. 「CSS rules to specify families」のタグをコピーし、メモ帳(Windows)やテキストエディタ(Mac)などに一旦貼り付ける。
    __________2020-06-10_19.30.54.png
    例（選択したフォントによって青文字部分は異なります）
    font-family: 'Pacifico', cursive;
  6. 貼り付けたタグを下記のように編集する。 
    例 
    <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
    <style>
      *{
        font-family: 'Pacifico', cursive;
      }
    </style>

ペライチのページにタグを埋め込む

  1. 編集画面のサイドバーより、「ページ管理設定」ボタンをクリック。
  2. 「タグの埋め込み」タブをクリック。
  3. 「headタグ内の埋め込み」に編集したタグを貼り付ける。
    ____________18_.png
  4. 「ページ管理設定」画面の「保存」ボタンをクリック。
  5. プレビューでフォントが適用されているか確認する。

設定例

例１

5687792b-90d0-4691-9cbd-44440a000007.png

<link href='https://fonts.googleapis.com/css?family=Pinyon+Script' rel='stylesheet' type='text/css'>
<style>
*{
font-family: 'Pinyon Script', cursive;
text-shadow: 4px 4px 2px #CCCCCC;
}
</style>

例２

5687792b-90d0-4691-9cbd-44440a000007.png

<link href="https://fonts.googleapis.com/css?family=Passion+One:700" rel="stylesheet" type="text/css">
<style>
*{
color: #666666;
font-size: 60px;
letter-spacing: 8px;
font-family: 'Passion One', cursive;
text-shadow: -1px -1px 1px #333333, 1px 1px 1px #FFFF99;
}
h2{
font-family: 'Passion One', cursive;
color: #fff;
text-shadow: 0px -2px 4px white, 0px -4px 20px #FFFF00, 0px -10px 40px #FF9900, 0px -16px 80px #FF0000;
}
</style>

関連記事

このセクションの記事

もっと見る