web-dev-qa-db-ja.com

フォントをReactアプリケーションにインポートします

アプリでRobotoフォントを使用しようとしていますが、苦労しています。

私はnpm install --save typeface-robotoを実行し、import 'typeface-roboto'をReactコンポーネントに追加しました。それでもフォントを変更できません。

私はこのようにしようとしています：

const React = require('react')
import 'typeface-roboto'

class Example extends React.Component {

  render() {

    let styles = {
      root: {
        fontFamily: 'Roboto'
      }
    }

    return (
      <div style={styles.root}>
        <p>
          This text is still not Roboto ?!???!!1
        </p>
      </div>
    )
  }
}
module.exports = Example

何か不足していますか？外部cssファイルなしでこれを行う簡単な方法を探しています。

cssreactjsfontsmaterial-design
7
Egor Egorov

この行のコードをメインのcssまたはscssにインポートします。

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap');

これは動作します。これをカスタマイズする場合は、Googleフォントに移動して、フォントスタイルのフォントの太さを選択します。ここでは、フォントの太さ400、300、700を選択しています。フォントの太さを選択していない場合、他のフォントの太さを使用することはできません。

2
Sourabh Dubey

ルートファイル、つまりindex.jsファイルにimport 'typeface-roboto';を追加してみてください。

私の場合、body要素にfont-familyを追加し、それが機能します。

2
Parameshwar Ande

同じ問題があり、コンポーネントのRobotoフォントを取得できませんでした。

私はwebfontloaderパッケージを使用しました。

yarn add webfontloader

または

npm install webfontloader --save

hこれを行ったら、次のコードをindex.jsまたはアプリケーションへのエントリーポイントであるJSファイルに追加します。

import WebFont from 'webfontloader';

WebFont.load({
  google: {
    families: ['Titillium Web:300,400,700', 'sans-serif']
  }
});
// rest of the index.js code

そして今度はfont-familyを適用します。

1
Priyank Thakkar

CSSinJSを使用する場合を想定して、いくつかの変更が加えられています。

  1. styleをclassNameに変更します
  2. stylesを適用するには、ある種のライブラリが必要です。

react-jssを使用

import React from 'react';
import 'typeface-roboto';
import injectSheet from 'react-jss';

const styles = {
  root: {
    fontFamily: 'Roboto',
  },
};

class Example extends React.Component {
  render() {
    return (
      <div className={styles.root}>
        This text is Roboto
      </div>
    )

  }
}

const StyledExample = injectSheet(styles)(Example)

export default StyledExample;

またはMaterialUIスタイル：

import React from 'react';
import 'typeface-roboto';
import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
  root: {
    fontFamily: 'Roboto',
  },
});

function Example(props) {
  const { classes } = props;

  return (
    <div className={classes.root}>
      This text is Roboto
    </div>
  );
}

export default withStyles(styles)(Example);

または、 あなたはそれを正しい方法で行うことができます 、Dan's Answer経由

またはスタイル付きコンポーネントの方法：

import styled from 'styled-components'

const ExampleStyled = styled.div`
  @font-face {
    font-family: 'Roboto';
    src: local('Roboto'), url(fonts/Roboto.woff) format('woff');
  }
`

const Example = () => (
  <ExampleStyled>
     This text is Roboto!
  </ExampleStyled>
);

export default Example;
1
tgrrr

単にそれをrequire（ 'typeface-roboto'）するだけです。

const React = require('react')
require('typeface-roboto')

class Example extends React.Component {

  render() {

    let styles = {
      root: {
        fontFamily: 'Roboto'
      }
    }

    return (
      <div style={styles.root}>
        <p>
          This is now Roboto
        </p>
      </div>
    )
  }
}
// or here instead if you fancy
    .root {
        font-family: 'Roboto';
    }
0
Nesuarg