WEB WORDPRESS

【WEBフォントでHPをおしゃれに】「游ゴシック体」をWINGに適応させよう!英語フォントも設定しよう!

更新日:

ブログを自分の好きなようにカスタマイズすると、どんどん楽しくなります!

私はもともと紙もののデザイナーだったこともあり、フォントが大好き!

フォントが好きでないと読む気もおきない!

 

WEBと紙のデザインのコツは異なりますが、

紙もののデザインのように、フォントにもこだわりたい!

 

私が好きな日本語フォント「游ゴシック体」

見ているだけで綺麗でうっとりしちゃう「游ゴシック体」フォント。

ゴシックで読みやすいのに、ゴシックより優しくて。

 

大好き!

 

AFFINGER5に「游ゴシック体」

無難に適応させようとしても

全てに適応されず、CSSに追記しました!

すると全てに適応されました!

以下のCSSコードで「游ゴシック体」を適応させることができます!

 

AFFINGER5用 「游ゴシック体」CSS

/*--------------------------------------------------------------------------------------------------------------------------------------------必須1------------*/

/*游ゴシック体の設定 */

/*游ゴシック体の設定 */

/*游ゴシック体の設定 */

*, code

{

 font-family: '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif;

letter-spacing: 1px;

}

.entry-title:not(.st-css-no), .post .entry-title:not(.st-css-no) {

font-family: '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif;

}

#st-magazine dd h3, .st-cardlink-card a, .rankh4:not(.st-css-no), .post .rankh4:not(.st-css-no), #side .rankh4:not(.st-css-no), .originalbtn-bold, .st-header-flextitle, .post h2:not(.st-css-no), .post h2:not(.st-css-no) span, .post h3:not(.st-css-no), .post h3:not(.st-css-no) span, .h2modoki, .h3modoki, .entry-title:not(.st-css-no), .post .entry-title:not(.st-css-no) {

font-family: '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif !important;

}

#st-magazine dd h3, .st-cardlink-card a, .rankh4:not(.st-css-no), .post .rankh4:not(.st-css-no), #side .rankh4:not(.st-css-no), .originalbtn-bold, .st-header-flextitle, .post h2:not(.st-css-no), .post h2:not(.st-css-no) span, .post h3:not(.st-css-no), .post h3:not(.st-css-no) span, .h2modoki, .h3modoki, .entry-title:not(.st-css-no), .post .entry-title:not(.st-css-no) {

    font-family: '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif  !important;

}

/*検索内文字 */

#s {

font-family: '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif;}

/*游ゴシック体の設定 終了 */

/*游ゴシック体の設定 終了 */

/*-------------------------------------------游ゴシック体の設定 終了 -------------------------------------------*/

ぜひお試しください

 

 

Googleフォントから日本語フォントを選ぶ

Googleフォントに入ってる日本語フォントは今のところコチラ

日本語フォント

参考サイト

游ゴシックのfont-family指定方法2018年度版!

http://writing-mode.com/20141125/font-family/

 

 

 

Copyright© うふふ.TOKYO , 2019 All Rights Reserved.