このチュートリアルでは、Google WebフォントをBloggerブログにアップロードする方法を紹介します。 これを行うにはいくつかの方法がありますが、これが私のやり方です。
このチュートリアルは、いくつかのCSSの知識を持っている人に最適です。 このチュートリアルでは、Bloggerの”Simple”テンプレートを使用しています。
Lemon MacaronテンプレートにインストールされているカスタムGoogleウェブフォントの例を次に示します。
ステップ1
始める前に、変更を加える前に現在のテンプレートをバックアップすることを常にお勧めします（何か問題が発生した場合に備えて）。
ダッシュボードでこれを行うには、テンプレート>バックアップ/復元（右上隅にあります）>完全なテンプレートをダウンロードします。
ステップ2
テンプレートをバックアップした後、HTMLの編集をクリックします（”テンプレート”タブにまだあります）。
ステップ3
このページを開いたままにして、新しいタブまたはウィンドウを開き、Google Web Fonts webサイトに移動します。 使用したいフォントを検索し、[Quick Use]を選択します。
私は’Lobster Two’フォントを使用することを選択しました。
ステップ4
セクション1の場合：必要なスタイルを選択し、フォントに使用できるスタイルを選択します（複数のスタイルを選択できます）。 あまりにも多くのスタイルを選択すると、ブログが遅くなる可能性があることに注意してください。 私はあなたが以下を見ることができるように通常の400を選択しました。
セクション3:このコードをウェブサイトに追加するには、@importタブをクリックします。
ステップ5
@importボックスに情報をコピーします。
さて、このページを開いたままにして、あなたのブログ（HTMLの編集を選択した場所）に戻ります。 私たちはあなたのテンプレートにフォントインポートコードを貼り付けるつもりです。
テンプレートエディタの先頭にあるフォローテキストを探します(通常は13行目または14行目にあります)。:
<b:skin>...</b:skin>
展開したら、Google Web Fonts webサイトの@importボックスからコピーした情報を次のテキストに貼り付けます:
/* Variable definitions
これは次のようになります:
テンプレートの保存をクリックします。 フォントがインポートされました！ これで、フォントファミリをテンプレート内で表示する場所に配置できます。
ステップ6
すぐに、私はあなたの新しくインポートされたフォントを使用する方法を紹介します。 この例では、投稿タイトルにフォントを使用します。 HTMLエディタでは、次のように検索します:
h3.post-title, .comments h4
次の行を削除します:
font: $(post.title.font);
そしてセクション4にリストされているテキストとそれを取り替えなさい:googleの網の壷のウェブサイトのあなたのCSSに壷を統合しなさい。
font-family: 'Lobster Two', cursive;
フォントファミリ情報を貼り付けると、次のようになります:
