🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
font

近年は、コンピュータ上、紙面上で利用できる書体データのことをfontといいます。数える時の単位は「書体」で、データとしてのフォントは、デジタルフォントと呼ばれる場合があります。 HTML/CSSでは要素を指定し、フォント情報を調整することができます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

1回答

2652閲覧

create-react-appで作成したプロジェクトにフォントを設定するには

退会済みユーザー

退会済みユーザー

総合スコア0

font

近年は、コンピュータ上、紙面上で利用できる書体データのことをfontといいます。数える時の単位は「書体」で、データとしてのフォントは、デジタルフォントと呼ばれる場合があります。 HTML/CSSでは要素を指定し、フォント情報を調整することができます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/01/26 03:26

聞きたいこと

create-react-appで作成したアプリに、フォントの設定をしたいと思っているのですが、適用されません。
原因究明方法や原因自体がわかる方がいたら教えていただきたいです。

実施したこと

  • src/配下にカスタムフォントをダウンロード
  • src/index.css にカスタムフォントの設定追加
  • src/index.css を src/index.tsxにてimport

コード

  • src/index.css

css

1 2: 3 4@font-face { 5 font-family: 'Custom Font'; 6 src: url(./custom-font.ttf) format('ttf'); 7} 8 9:
  • src/index.tsx
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; : eactDOM.render( : document.getElementById('root')

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

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

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

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

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

guest

回答1

0

src/配下にカスタムフォントをダウンロード

publicフォルダに置かないとurl(./custom-font.ttf) で読み込めないのではないでしょうか?

投稿2021/01/26 14:24

編集2021/01/26 14:59
mikan3rd

総合スコア220

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問