Font not working in Mobile and Safari Browsers

[irffanasiff]

In Safari browser the logo text is not Applied. Try to reproduce the bug (if you don't have a mac use BrowserStack or any service you like). Check for mobile browser too. The font used will be available in /public folder.

Importing font

Where to find the code for @font-face
in /styls/theme.js change the code inside @font-face{ ... } to import local fonts and check chakraUI docs to import font by some other way.

const Fonts = () => {
  <Global
    styles={`
      @font-face {
        font-family: 'Eldwin';
        font-style: italic;
        font-weight: 800;
        font-display: swap;
        src: url('/public/Eldwin-ScriptHeavy.woff2') format('woff2'), url('/public/Eldwin-ScriptHeavy.woff') format('woff');
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    
    }
      @font-face {
        font-family: 'Eldwin';
        font-style: italic;
        font-weight: 500;
        font-display: swap;
        src: url('/public/Eldwin-ScriptRegular.woff2') format('woff2'), url('/public/Eldwin-ScriptRegular.woff') format('woff');
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    
    }
      @font-face {
        font-family: 'Eldwin1';
        font-style: italic;
        font-weight: 500;
        font-display: swap;
        src: '/Eldwin-ScriptRegular.otf'
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    
    }
      @font-face {
        font-family: 'Eldwin1';
        font-style: italic;
        font-weight: 500;
        font-display: swap;
        src: '/Eldwin-ScriptRegular.otf'
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    
    }

    `}
  />;
};

Using the font in components

The font Eldwin is used in the logo. You will change it inside the logo.js component in src folder. Same font with regular weight is used in /src/hero.js

How to solve

• I think the issue is with font family is not supported in all browsers check if that is the issue.
• The other reason might be the font formats we have are not supported by the browser.
• Mobile browsers and Sfari are having different issues, Please check that also maybe you will get some hint.

[kady-z]

Assign this to me.

[irffanasiff]

You can work on it now if you want any help you can write it below

[kady-z]

Thank you sir.