How to add persian Fonts to Next.js?

Question

I can't add Persian Fonts to my Next.js in ubuntu and my fonts url is :static/Fonts/IRANSansWeb.eot . I used dangerouslySetInnerHTML but still not working in ubuntu.I dont understand why works in mac os

font URL -I tried this in my code:

return (
  <html lang="en" dir="rtl"> 
    <Head>
      <title>فراخوان نقد</title>
      <meta charSet="utf-8" />
      {/* Use minimum-scale=1 to enable GPU rasterization */}
      <meta
        name="viewport"
        content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
      />
      {/* PWA primary color */}
      <meta name="theme-color" content={pageContext.theme.palette.primary.main} />
      {/* <link
        rel="stylesheet"
        href="https://fonts.googleapis.com/css? 
        family=Roboto:300,400,500"
      /> */}
       <link 
        rel="stylesheet" 
        href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0- 
        alpha.6/css/bootstrap.min.css" 
      />
      <style dangerouslySetInnerHTML={{__html: `
        @font-face {
          font-family:
          'IranSans,tahoma';
          font-style:
          normal;
          font-weight:
          400;
          src:
          url("../static/Fonts/IRANSansWeb.eot");
          src:
            url("../static/Fonts/IRANSansWeb.eot?#iefix") 
             format('embedded-opentype'),
              url("../static/Fonts/IRANSansWeb.woff2") 
              format('woff2'),
              url("../static/Fonts/IRANSansWeb.woff") 
              format('woff'),
              url("../static/Fonts/IRANSansWeb.ttf") 
              format('truetype');
        }
        body{
          font-family:
        'IranSans, tahoma' !important
        }
        `}}/>
    </Head>
    <body>
      <Main />
      <NextScript />
    </body>
  </html>
);

Answer 1

One solution requiring ontfaceobserver . change fonts according to your choice

Fonts.js

const FontFaceObserver = require('fontfaceobserver')

const Fonts = () => {
  const link = document.createElement('link')
  link.href = 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900'
  link.rel = 'stylesheet'

  document.head.appendChild(link)

  const roboto = new FontFaceObserver('Roboto')

  roboto.load().then(() => {
    document.documentElement.classList.add('roboto')
  })
}

export default Fonts

Then on my index.js

import React from 'react'
import Home from '@/Home'
import Fonts from '~/general/Fonts'

class Index extends React.Component {
  componentDidMount () {
    Fonts()
  }

  render () {
    return <Home />
  }
}

export default Index

Answer 2

Here are couple things that I can see that might be root of the issue

1) Static folder is referenced as absolute path /static/file.txt inside the next.js app

2) Instead of using style dangerouslySetInnerHTML you can use style jsx that is built in by default in next.js

So the resulted code should look like this

<Head>
  <style global jsx>{`
    @font-face {
      font-family: 'CustomIranSans';
      font-style: normal;
      font-weight: 400;
      src: url("/static/Fonts/IRANSansWeb.eot");
      src: url("/static/Fonts/IRANSansWeb.eot?#iefix") format('embedded-opentype'),
        url("/static/Fonts/IRANSansWeb.woff2") format('woff2'),
        url("/static/Fonts/IRANSansWeb.woff") format('woff'),
        url("/static/Fonts/IRANSansWeb.ttf") format('truetype');
    }

    body {
      font-family: 'CustomIranSans', Tahoma;
    }
  `}</style>
</Head>

Hope this helps!

How to add persian Fonts to Next.js?

Question

2 answers

solution1
1 2018-09-10 13:20:59

solution2
1 2018-09-10 13:30:16

How to add persian Fonts to Next.js?

Question

2 answers

solution1 1 2018-09-10 13:20:59

solution2 1 2018-09-10 13:30:16

solution1
1 2018-09-10 13:20:59

solution2
1 2018-09-10 13:30:16