web-dev-qa-db-ja.com

マテリアルUIテーマでカスタムフォントをインポートして使用する方法

Material-UIテーマのReactアプリで、（Google Fontsから）Yellowtailフォントをインポートして使用しようとしています。

すべてのGoogleフォントがnpmにあることを知っている限り、私はそれをインストールしました。

npm install typeface-yellowtail --save

コマンド。

App.jsにインポートし、テーマのfont-family部分に入れて、テーマをMuiThemeProviderに渡しましたが、機能しません。私は何を取りこぼしたか？

これは私がApp.js内に持っているものです（ヘッダーにはいくつかのグリッドのあるAppBarが含まれ、本文にはテスト用のh1テキストのみが含まれます）

import React, { Component, Fragment } from 'react';
import Header from './Components/Layouts/Header';
import AppBody from './Components/Layouts/AppBody';
import Footer from './Components/Layouts/Footer'; 
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core';
import 'typeface-yellowtail';

const theme = createMuiTheme({  
  typography: {
    fontFamily: 
      '"Yellowtail", cursive',
  },
});

class App extends Component {
  render() {
    return (
      <MuiThemeProvider theme={theme}>
        <Header />
        <AppBody />
        <Footer />       
      </MuiThemeProvider>
    );
  }
}

export default App;
reactjsmaterial-designmaterial-uitypographyfont-family
9
boglarkaszell

Npmを使用してインストールする代わりに、最初にCSSファイルをロードするだけです。

@import url('https://fonts.googleapis.com/css?family=Yellowtail&display=swap');

このCSSファイルをインポート

import './assets/css/yellowtail.css';

これで、@ font-faceを使用する必要はありません。これは、通常のフォントファミリーで使用できます。

4
Nautatava Navlakha