I've just deployed my website that I built using react.js, I am using Raleway font for the whole website, but when I opened it with my iphone using safari browser it shows me another font, how can I solve this problem ?

CodePudding user response：

Import the font.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">

CodePudding user response：

Do you import your font in your website? You can add those lines in your index.html so anyone that doesn't have installed Raleway (including mobiles apps) will be able to display it.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">

If you need specific styles, you can select them and generate your import lines here: https://fonts.google.com/specimen/Raleway