In the process of constructing a website with Gatsby.js, Styled-Components, and a custom font named 'Montserrat', I encountered an issue regarding font loading. The font appears as expected on desktop browsers during both build and hot-reloading, but fails to load on mobile iOS devices (untested on Android). I have been troubleshooting to pinpoint where the problem lies.
Here are the steps I've taken:
Experimenting with Google Fonts;
Directly importing fonts using file paths;
Using JavaScript imports for file paths;
Creating separate font-face declarations for individual fonts.
I've researched similar queries on Stack Overflow and Google, but most results focus on general formatting issues or solutions I've already attempted.
This is my main.js file where I import local fonts:
(contents of the main.js file)The issue persists in one of my components which should utilize the 'Montserrat' font, but instead defaults to 'san-serif'. For instance, '
Quality. Value.
' uses 'san-serif' rather than 'Montserrat.'This is how it currently compiles:
(contents of the CSS compilation code)You can access the live version here, or append the file path to this URL to download all font files: .