. WordPress│好きなWebフォントを使用する方法 | WAZA │ WordPress・SWELL専門の技術サイト
WordPress│好きなWebフォントを使用する方法 | WAZA │ WordPress・SWELL専門の技術サイト
WordPress│好きなWebフォントを使用する方法 | WAZA │ WordPress・SWELL専門の技術サイト

WordPress│好きなWebフォントを使用する方法

Kaisei Opti – Google Fonts Kaisei Opti is a modern style Japanese typeface. When typesetted, it gives a cheerful and breezy impression. To contribute to the project, visit https://github.

フォントの格納

ダウンロードしたフォント( KaiseiOpti-Bold.ttf )をテーマの直下に格納します。

サーバーへの格納方法はFTPを使ってアプロードするか、プラグインのFile Managerを使用してください。

CSSの記述

WordPressの管理画面 > 外観 > テーマファイルエディター > style.css を開いて、下記のコードを挿入しましょう。

/*Webフォントの読み込み*/ @font-face < font-family: kaisei-opti; font-style: bold; src: url(wp-content/themes/swell_child/KaiseiOpti-Bold.ttf) format("truetype"); >/*見出しをWebフォントに*/ h2, h3

サンプルとして本記事の見出し、h2 と h3にWebフォントを適応しています。

まとめ

URLをコピーしました!

アフィリエイト付き!有料記事のサブスクリプションについて WAZAでは特に有益な記事は有料記事とさせていただいてます。 本記事では有料記事をリストでまとめました。 また有料記事の読み放題のサブスクリプション、そして有料記.

Service

WordPressサイトのカスタマイズのサービスに関心がありましたら、ぜひ詳細をご覧ください。

関連記事

WordPress│複数の著者(ユーザー)を記事一覧に登録する方法 WordPress│pre_get_posts フィルタで記事一覧表示を変更する方法 WordPress│管理画面にカスタムフィールドの一覧・編集機能を作成する方法 WordPress│指定範囲にだけGoogleスプレッドシートの表をiframeで埋め込む方法 WordPress│情報をRSS化して別サイトでも動的に参照する方法 WordPress│固定記事で使われているテンプレートを洗い出す方法 WordPress│本文で使われているショートコードを洗い出す方法 WordPress│ギャラリーブロックをカルーセル付スライダー表示にする方法│Swiper WordPress│エフェクト用の画像2枚だけでループアニメーションを作成する方法 WordPress│投稿記事を階層化する方法 WordPress│コードだけでSMTPを設定する方法│PHPMailer WordPress│多言語サイトのhreflangタグを動的に出力する方法
  • SEO対策 (35)
    • 内部施策 (19)
    • 高速化 (16)
    • SWELLカスタマイズ (105)
    • WordPressカスタマイズ (78)
    • プラグイン (30)
    • 自作テーマ制作 (9)
    • エラー・不具合対応 (20)
    • サイト・サーバー移転・ドメイン移管 (14)
    • セキュリティ強化 (8)
    • 便利ツール・サービス (24)