'Adobe Typekit fonts not loading on mobile
I just deployed a new react app via netlify, and I noticed that on mobile browsers my fonts aren't loading. I'm using the import method in my primary stylesheet, and I've also linked to it in the index.html file in my public folder. I've used typekit fonts before in other projects (not react), and it's worked fine. Is there something I'm missing?
App.scss file:
@import url("https://use.typekit.net/dsg6xei.css");
@import "~slick-carousel/slick/slick.css";
@import "~slick-carousel/slick/slick-theme.css";
:root {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
display: block;
--color-white: #ffffff;
--color-secondary: #65d562;
--color-primary: #5a37da;
--color-black: #171718;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Scandia", "Trebuchet MS", Helvetica, sans-serif;
}
And in the html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web designer and developer based in Minnesota"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="https://use.typekit.net/dsg6xei.css" />
<title>Web Design & Development</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
