Webフォントについて
Webフォントとは
- Web上のフォントのデータを使用するため、自分以外の環境でも同じフォントでWebサイトが表示できます。
Google Fontsとは
注意点
利用できるプラン
- 「タグの埋め込み」機能はレギュラープラン以上のプランで利用できます。
- 各プランの詳細はこちら
- 「タグの埋め込み」機能はオプション契約でもご利用できます。
利用に際して確認すること
- Webフォントを使用する際はフォントの利用規約をご確認ください。
有料のフォントや利用用途に制限のあるフォントもあります。
フォントが適用されない文字について
- フォントが適用されない文字はデフォルトのフォントで表示されます。
閲覧環境によって指定したフォントで表示されないことがあります。
- Webフォントを使用することによって、ペライチのフォント変更で設定したフォントが適用されない場合があります。
- フォントによって、そのフォントが使える文字が異なります。
また、意図しない文字になる場合があります。
その他
- 下記でご案内する手順はGoogle Fontsの設定方法の一例です。
ペライチではGoogle Fontsやその他のWebフォントサービスの詳細や設定方法についてご案内できません。
利用手順
Google Fontsでフォントを探す
- Google Fontsにアクセスする。
- フォントを探す。
- 選択したフォントの「＋ Select this style」をクリックする。
- 「To embed a font, copy the code into the <head> of your htm」の<link>のコードをコピーし、メモ帳(Windows)やテキストエディタ(Mac)などに一旦貼り付ける。
例（選択したフォントによって異なります）
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
- 「CSS rules to specify families」のタグをコピーし、メモ帳(Windows)やテキストエディタ(Mac)などに一旦貼り付ける。
例（選択したフォントによって青文字部分は異なります）
font-family: 'Pacifico', cursive;
- 貼り付けたタグを下記のように編集する。
例
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
<style>
*{
font-family: 'Pacifico', cursive;
}
</style>
ペライチのページにタグを埋め込む
- 編集画面のサイドバーより、「ページ管理設定」ボタンをクリック。
- 「タグの埋め込み」タブをクリック。
- 「headタグ内の埋め込み」に編集したタグを貼り付ける。
- 「ページ管理設定」画面の「保存」ボタンをクリック。
- プレビューでフォントが適用されているか確認する。
設定例
例１
<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>
例２
<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>
