質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Q&A

解決済

1回答

3063閲覧

サーバーにアップロードしたfontが反映されない

退会済みユーザー

退会済みユーザー

総合スコア0

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

0グッド

0クリップ

投稿2021/06/25 14:29

編集2021/06/26 06:00

前提・実現したいこと

プラグインで読み込んでいるGoogleフォントをレンタルサーバーにアップロードしてそっちから読み込む方法に変更したいです

発生している問題・エラーメッセージ

サーバーにアップロードしてcssを変更したのですがフォントが何故か反映されません

該当のソースコード

@font-face { font-family: 'ABeeZee'; src: url( "fonts/ABeeZee-Regular.woff") format('woff'); font-weight: normal; font-style: normal; } body, #content, .entry-content, .post-content, .page-content, .post-excerpt, .entry-summary, .entry-excerpt, .widget-area, .widget, .sidebar, #sidebar, footer, .footer, #footer, .site-footer{ font-family: 'ABeeZee'; }

試したこと

https://kinsta.com/jp/blog/how-to-change-font-in-wordpress/

  1. GoogleからwebフォントをDL
  2. .ttfから.woffに変換(https://convertio.co/ja/ttf-woff/)
  3. レンタルサーバーにfontsフォルダ作成(wp-content/themes/テーマ名)
  4. fontsフォルダにフォントをアップロード
  5. style.cssにコードを追加

イメージ説明

補足情報(FW/ツールのバージョンなど)

WordPressバージョン:5.7.2
PHPバージョン:7.4.13

追加情報1

イメージ説明
エックスサーバーに作ったfontsディレクトリ
イメージ説明

## 追加情報2

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

url指定が間違っており、フォントが読み込まれていないのが原因だと思います。

src: url( "fonts/ABeeZee-Regular.woff") 

ここを適切なurlに変更して、スーパーリロードしてみてください。

投稿2021/06/25 20:01

Jon_do

総合スコア1373

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2021/06/26 05:10

``` ・src: url( "./fonts/ABeeZee-Regular.woff")  →× ・src: url( "../fonts/ABeeZee-Regular.woff")  →× ``` でも反映されませんでした 適切なurlとはファイルパスと理解しています
退会済みユーザー

退会済みユーザー

2021/06/26 05:23

src: url( "https://hogehoge.com/ABeeZee-Regular.wofff") にして反映されませんでした 念のためhttps://hogehoge.com/ABeeZee-Regular.wofffにアクセスして確認したところ 404でした
退会済みユーザー

退会済みユーザー

2021/06/26 05:38

何度もすいません さっきの回答でfonts/抜けていました 実際は https://hogehoge.com/fonts/ABeeZee-Regular.wofff で404 not foundになります。 ディクトリの画像なども追加いたします
退会済みユーザー

退会済みユーザー

2021/06/26 06:29

ありがとうございます 出来ました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問