Wordpress - font-faceでカスタムフォントを追加する

Question

私は今、html5blankテーマを使ってwordpressにアップロードしているフロントエンドサイトを構築しました。前にカスタムフォントファイルをアップロードしたことがなく、ファイルパスが間違っていると思います。 フォントファイルは、私の子テーマフォルダのフォントフォルダにあります。これは私が私のコードを持っているかである -

のstyle.css

@font-face { 
    font-family: 'Gotham-Light'; 
    src: url('/fonts/Gotham-Light.otf') format('opentype'); 
    font-weight: normal; 
    font-style: normal; 

} 

私もheader.php（わからないこれは必須です）でこれを入れてきました -

私はどのように

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() ?>/fonts/Gotham-Light.otf" /> 

をそれが問題の場合は正しいパスを表示しますか？それは相対的なものか絶対的なものである必要がありますか？

Answer 1

あなたはここにする@ font-faceで絶対パスを使用している：

src: url('/fonts/Gotham-Light.otf') format('opentype'); 

/開始時にそのWebrootウェブルートでフォントを探していることを意味します。

あなたのstyle.cssを仮定すると、あなたの子供のテーマフォルダにあり、fontsは、そのサブフォルダは、この（すなわち開始時/はなし）してみてくださいです：

src: url('fonts/Gotham-Light.otf') format('opentype'); 

Answer 2

これは、テーマディレクトリのfontsという名前のフォルダ内にフォントを置くだけで動作します。

@font-face { 
font-family: 'gothamlight'; 
src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Gotham-Light.otf); 
font-weight: normal; 
font-style: normal; 

}

Answer 3

あなたはフォントファイルのアドレスを必要としませんスタイルシート。

<link rel="stylesheet" href="<?php echo get_template_directory_uri('/fonts/Gotham-Light.otf') ?>/fonts/Gotham-Light.otf" />