In my native language Persian, our fonts bear a striking resemblance to Arabic fonts. To accommodate this in my project, I created a dedicated file called globalStyles.js:
import { createStyles } from '@material-ui/core';
import yekanRegularTtf from '../app/assets/font/iranyekanwebregular.ttf';
import yekanRegularWoff from '../app/assets/font/iranyekanwebregular.woff';
import yekanRegularWoff2 from '../app/assets/font/iranyekanwebregular.woff2';
import yekanBoldTtf from '../app/assets/font/iranyekanwebbold.ttf';
import yekanBoldWoff from '../app/assets/font/iranyekanwebbold.woff';
import yekanBoldWoff2 from '../app/assets/font/iranyekanwebbold.woff2';
const globalStyles = ({ spacing, typography, colors }) =>
createStyles({
'@global': {
'@font-face': [
{
fontFamily: 'IRANYekan',
fontStyle: 'normal',
fontWeight: 400,
src: `url(${yekanRegularWoff2}) format('woff2')`,
fallbacks: {
src: [
`url(${yekanRegularWoff})`,
`url(${yekanRegularTtf}) format('truetype')`,
],
},
},
{
fontFamily: 'IRANYekan',
fontStyle: 'normal',
fontWeight: 700,
src: `url(${yekanBoldWoff2}) format('woff2')`,
fallbacks: {
src: [
`url(${yekanBoldWoff})`,
`url(${yekanBoldTtf}) format('truetype')`,
],
},
},
],
html: {
lineHeight: '1.5',
WebkitTextSizeAdjust: '100%',
},
'*': {
transition: 'opacity 1s cubic-bezier(0.4, 0, 0.2, 1)',
fontFamily: "'IRANYekan', sans-serif, Arial",
boxSizing: 'border-box',
'&:after, &:before': {
fontFamily: "'IRANYekan', sans-serif, Arial",
boxSizing: 'border-box',
},
'&[type="checkbox"], &[type="radio"]': {
boxSizing: 'border-box',
padding: '0',
},
// Continue with the rest of the CSS styles...
},
body: {
fontFamily: "'IRANYekan', sans-serif, Arial",
lineHeight: '1.38',
margin: 0,
},
// Continue with the rest of the CSS styles...
},
});
export default globalStyles;
To integrate these styles into my project, I injected them into the root component at the top level of my components:
import React from 'react';
import { Provider as ReduxProvider } from 'react-redux';
import { CssBaseline, withStyles } from '@material-ui/core';
import { Helmet } from 'react-helmet';
import SnackBarProvider from './SnackBar';
import globalStyles from '../utils/globalStyles';
import { generalHelmet } from '../utils/helmetConfig';
type AppProviderProps = {
children: any,
store: any,
};
const AppProvider = ({ children, store }: AppProviderProps) => (
<>
<Helmet {...generalHelmet} />
<CssBaseline />
<ReduxProvider store={store}>
<SnackBarProvider>{children}</SnackBarProvider>
</ReduxProvider>
</>
);
export default withStyles(globalStyles)(AppProvider);
In addition, I configured the font loader in my Webpack configuration file as follows:
~~~
const nodeEnv = process.env.NODE_ENV || 'development';
const isDev = nodeEnv === 'development';
const exclude = [/node_modules/, /public/];
const name = isDev ? '[name].[ext]' : '[hash:5].[ext]';
const publicPath = '/assets/';
~~~
module.exports = {
~~~
module: {
rules: [
~~~
{
test: /\.(woff2?|ttf|eot|svg)$/,
exclude,
loader: 'url',
options: { limit: 10240, name, publicPath },
},
With all these configurations in place, everything is functioning smoothly now. I hope this setup proves helpful for you.