Webフォントをサイトタイトルに導入したい

Simplicityの特徴 フォーラム Simplicity2に関する話題何でも Webフォントをサイトタイトルに導入したい

  • このトピックには6件の返信、1人の参加者があり、最後にむらかみにより9年、 5ヶ月前に更新されました。
6件の返信スレッドを表示中
  • 投稿者
    投稿
    • #50769
      むらかみ
      ゲスト

      すみません。
      サイトタイトルにWebフォントを導入したいのですが、
      なんどやってもできません。
      詳しいかた教えていただけないでしょうか。
      http://faqunited.com
      ↑がサイトです。

      以下、Simplicity2 child: スタイルシート (style.css)

      @charset "UTF-8";
      @import url("../simplicity/style.css");
      @import url('https://fonts.googleapis.com/css?family=Dancing+Script|Rock+Salt');
      
      /*!
      Theme Name: Simplicity2 child
      Template:   simplicity2
      Version:    20161002
      */
      
      /* Simplicity子テーマ用のスタイルを書く */
      
      body { /* サイトタイトル文字の設定 */
      font-family: 'Rock+Salt', sans-serif;}
      
      /*ヘッダーブログタイトル文字上からの余白*/
      #site-title{
      margin-top:20px;
      margin-bottom:25px;
      font-family: 'Rock+Salt', sans-serif;
      }
      /*ヘッダー文字の大きさの変更*/
      #site-title a{
      display:block;
      text-decoration:none;
      color:#222;
      font-size:50px;
      line-height:100%;
      font-family: 'Rock+Salt', sans-serif;
      }
    • #50772
      Hidekichi
      ゲスト

      まず、
      @import url(“../simplicity/style.css”); はおかしいです。
      こうするとSimplicity1系のスタイルを読み込みに行くかと思います。

      Simplicity2親テーマのstyle.css
      Simplicity1親(子?)テーマのstyle.css
      Simplicity2子テーマのstyle.css

      こんなcssになり、Simplicity2の親テーマを@importで読み込んだスタイルが上書きしてしまうので色々おかしくなります。
      なので@import url(“../simplicity/style.css”); は間違いなく削除する必要があります。

      @importを使うのであれば、
      @import url('https://fonts.googleapis.com/css?family=Rock+Salt');
      で良いかと思います。

      #site-title {
        font-family: 'Rock Salt', sans-serif;
      }
      #site-title a {
        font-family: inherit;
      }

      が一般的ですが、#site-title aのfont-familyは他で何かしら読み込まれていて(継承されていて)いる場合に上書きが必要なので上記のようにします。
      サイトタイトルは基本リンクだけかと思いますが、リンク以外にも該当フォントを適用したい場合、#site-titleにまず適応しておいて、その子要素のaに継承します。

      サイトタイトルにリンク以外の何かしらのテキストが入って(適用されて)いない場合は、

      #site-title a {
        font-family: 'Rock Salt', sans-serif;
      }

      だけでもよいです。質問に書いてあるようにサイト全体に適用したい場合は、

      body,
      #site-title a {
        font-family: 'Rock Salt', sans-serif;
      }

      としておいてもよいかと。

      また別件ですが、質問や回答する場合には、cssなどは必ず範囲選択後codeボタンを適用して下さい。
      記入ミスや、全角の使用などの有無を確認するためです。

    • #50774
      Hidekichi
      ゲスト

      ちなみにですが、

      body {
        font-family: 'Rock Salt', sans-serif;
      }

      とすれば、他で上書きされない限り、Rock Saltがまず適用され、文字がRock Saltにない場合、sans-serifが適用されます。

      最悪、

      body {
        font-family: 'Rock Salt', sans-serif !important;
      }

      とすれば、他で!importantが使われていない限り上書きが強制的にできなくなります。がこれは危険なので、!importantなしでbodyに設定しておき、適用されないセレクタを見つけて、追加していくのが良いかと思います。
      各セレクタに毎度font-familyを書くのは面倒なので、子テーマの上の方にまとめて書いておくと管理が楽です。

      ここまでは、@importでやる方法ですが、実際は、
      <link href="https://fonts.googleapis.com/css?family=Rock+Salt" rel="stylesheet">
      ※ 先頭の<は投稿エラー回避のため全角で書いてます。

      このように書けば良いので、

      子テーマfunctions.phpに、

      function addWebfont() {
        wp_enqueue_style( 'gwfont-rock-salt', 'https://fonts.googleapis.com/css?family=Rock+Salt', false ); 
      }
      add_action( 'wp_enqueue_scripts', 'addWebfont' );

      こんな感じでもよいかと。
      @importは読み込みがlinkに比べて1.5〜3倍ぐらい遅いです。言ってもミリセカンドの話ですけど。環境によりけりですがlinkの方が速いです。ここらを踏まえてSimplicity2ではほぼ@importは使われていないと思います。

      参考: wp enqueue style | codex

    • #50805
      むらかみ
      ゲスト

      解決しました1

      ひできちさん
      いつもありがとうございます!

    • #50809
      むらかみ
      ゲスト

      なんどもすみません。
      サイドバータイトルの表示もwebフォントを適用したいのですが、
      表示がされません。
      類似トピックスのひできちさんの投稿を参考に以下を子テーマの
      スタイルシートに追加してみましたができませんでした。
      どうすればよろしいでしょうか。q

      /*サイドバータイトル */
      #sidebar .widget_title {
        font-family: 'Rock Salt', sans-serif;
      }

      http://faqunited.com

      ABOUT ME の部分へWebフォントを適用したいです。

    • #50814
      Hidekichi
      ゲスト
      #sidebar .widget_title {
        font-family: 'Rock Salt',sans-serif;
      }

      上でイケました。

      #sidebar .widget_title {
      /*!   font-family: 'Rock Salt', sans-serif; */
      }

      cssにはこう書いてあるみたいですが、!は一応コメントアウトされるはずですが、wordpressは別の意味があるため、!を抜いてみて下さい。

    • #50815
      むらかみ
      ゲスト

      ありがとうございます!

      結果、

      #sidebar .widget_title {
        font-family: 'Rock Salt',sans-serif!important;
      }

      でいけました!

      いつもありがとうございます!

6件の返信スレッドを表示中
  • トピック「Webフォントをサイトタイトルに導入したい」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)