Ant Design / Umijsでフォントを変更する。

ローカルファイルを準備するとき

まずはassetsフォルダにフォントを準備する

index.lessにフォントを追加

index.less

@font-face {
  font-family: 'LineSeedJP';
  src: url('@/assets/LINESeedJP_OTF_Rg.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

ant designからConfigProviderをインポートし、使えるようにする。

index.ts

import './index.less'
import { ConfigProvider } from 'antd';

const Layout = () => {
  return (
    <ConfigProvider theme={{ token: {
      fontFamily: "'LineSeedJP'",
    
    } }}>
      
      <Outlet />
    </ConfigProvider>
  );
};

export default Layout;

Webフォントをダウンロードして使うとき

fontsourceからインポートしてつかう。

index.ts

import '@fontsource/shippori-mincho/400.css';
import '@fontsource/shippori-mincho/500.css';
import '@fontsource/shippori-mincho/600.css';
import '@fontsource/shippori-mincho/700.css';
import '@fontsource/shippori-mincho/800.css';

export default function Layout() {
  return (
   
      <ConfigProvider theme={{token:{
        fontFamily:"'Shippori Mincho'",
      }}}> 
      <div className={styles.navs}>
       
        <Outlet />
      </div>
      </ConfigProvider>
    
  );
}