ウェブフォントのよくある質問

Q.プラグインのインストールについて

Q.プラグインWEBフォントのCSSを変更について

＊最低限CSSの設定知識のあるWEBデザイナーの方を対象としています。

フロップデザインフォントを例に示します

1. ダッシュボード左メニュー→「インストールプラグイン」をクリック
2. プラグイン一覧から「Wfflop」の「編集」をクリック
3. wf-flopプラグイン編集画面の右メニューから

「wf-flop/wfflop/fgflop.css」をクリック

1. CSS下部の次の部分がWebフォントを指定しているスタイルです。

html,body,div,button,input,select,textarea,
code,kbd,pre,samp,address,a,p,dfn,mark,
blockquote,dl,dt,dd,menu,ol,ul,table,em,
site-info,form,textarea,.templateside,
.wp-admin,#menu-dashboard,.container a,
.container div,.container table,form,
.container h3,.container h4,
.container h5,.container h6
{
font-family: ‘fgflopweb’,’ヒラギノ角ゴ Pro W3′,
‘Hiragino Kaku Gothic Pro’,’メイリオ’,Meiryo,
‘ＭＳ Ｐゴシック’,’MS P’,sans-serif!important;
font-weight: normal!important;
font-style: normal!important;
}

h1,h2,h3,h4,h5,h6,
.home-jumbotron h1,.jumbotron h1,.container h1,.container h2,
.container,main,#site-title,.lead
{
font-family: ‘fgflopweb’,’ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,
‘メイリオ’,Meiryo,’ＭＳ Ｐゴシック’,’MS P’,sans-serif!important;
font-weight: normal!important;
font-style: normal!important;
}

1. 適用させたい要素が「p」だけなら以下のように編集。お使いのテーマ要素に合わせて適宜編集してください。

p
{
font-family: ‘fgflopweb’,’ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,’メイリオ’,Meiryo,’ＭＳ Ｐゴシック’,’MS P’,sans-serif!important;
font-weight: normal!important;
font-style: normal!important;
}

1. 「ファイルを更新」ボタンをクリック

以上でフォント指定のCSSが変わっているはずです。

よくある間違いとして、フォント名（全角文字）は「’」（シングルクォーテーション）で囲ってありますか？、フォント名は「,」（カンマ）で区切られていますか？、一カ所でもCSS記述ミスがあると適用されませんのでご質問なさる前にCSSを十分に見直してください。

Q.プラグインの日本語仮名フォントをウェブフォントファンのフォント、欧文フォントをグーグルWebフォントにしたい。

＊最低限CSSの設定知識のあるWEBデザイナーの方を対象としています。

上記CSSのプロパティに以下のように追記します。

グーグルフォントを既に導入されているワードプレスサイトの場合を想定しています。

html,body,div,button,input,select,textarea,
code,kbd,pre,samp,address,a,p,dfn,mark,
blockquote,dl,dt,dd,menu,ol,ul,table,em,
site-info,form,textarea,.templateside,
.wp-admin,#menu-dashboard,.container a,
.container div,.container table,form,
.container h3,.container h4,
.container h5,.container h6
{
font-family: ‘グーグルフォント名’,‘fgflopweb’,’ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,’メイリオ’,Meiryo,’ＭＳ Ｐゴシック’,’MS P’,sans-serif!important;
font-weight: normal!important;
font-style: normal!important;
}

Q.投稿した記事の日付の部分だけ改行されたような感じになっています。

＊最低限CSSの設定知識のあるWEBデザイナーの方を対象としています。

プラグインによっては欧文、数字などのアスキー文字部分が等幅フォントです。欧文の部分をシステム側のフォントで指定するか、グーグルWebフォントなどで指定してみてください。上記CSSのプロパティに以下のように追記します。この例では、OSX、Windowsでも表示可能な「Arial」で指定しています。

html,body,div,button,input,select,textarea,
code,kbd,pre,samp,address,a,p,dfn,mark,
blockquote,dl,dt,dd,menu,ol,ul,table,em,
site-info,form,textarea,.templateside,
.wp-admin,#menu-dashboard,.container a,
.container div,.container table,form,
.container h3,.container h4,
.container h5,.container h6
{
font-family: Arial,‘fgflopweb’,’ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,’メイリオ’,Meiryo,’ＭＳ Ｐゴシック’,’MS P’,sans-serif!important;
font-weight: normal!important;
font-style: normal!important;
}

Q.プラグインをインストールするとトップページのトピックスやプレスリリースなどの見出し文字の位置が変わります。日付もずれて変な位置に来ます。どう対応したら良いでしょうか？

＊最低限CSSの設定知識のあるWEBデザイナーの方を対象としています。

プラグインはWordpress純正テーマに最適化しております。社外製のテーマ側のCSSはサポート外ですが、考えられるのはh1〜h6の見出しタグのCSS改行スタイルかと思われます。

上記CSSの以下のh1〜h6の部分を削除してください。

h1,h2,h3,h4,h5,h6
{line-height:1!important;}

Q.ご使用条件・禁止事項について知りたいのですが？

Q.ウェブフォントプラグインが使用できないのですが？

Q.WindowsXPでも使用可能ですか？