I’m experimenting with WebFonts and have amended my site to use the rough_typewriter font. I’ve built .woff and .woff2 versions of the rough_typewriter fonts and have included them in the Github repo which serves the Netlify site.
So far so good. The page displays correctly on the Mac where the site was developed, both locally and at https://tangerine-khapse-b37bac.netlify.app/https://carlca.com, but if I try to access the page from my iPad or iPhone, the page just displays using the fallback font.
What am I missing here?
UPDATE: I’ve tried copying the 2 font files to my ./dist folder, but it hasn’t made any difference…
Thanks for the reply! I’ve been busy trying to fix it, and managed to mess things up and in the end I had to reset my Github repo completely.
Could I ask you to check whatever you checked before and tell me based on the up to date state?
AHA! You’ve given me an idea… hang on a moment…
I spoke too soon! I copied the stylesheet.css to my dist folder which is where the generated index.html and the wasm files go. Trouble is that the trunk serve command used to run the site locally, clears out the .css file. I’m not sure where to put it…
It’s common for build systems to destroy or empty their build output folder, usually they provide a different folder for placing static assets into which are then copied to the output folder during build.
What that folder is called would depend on the system you’re working with, but should be mentioned in the docs.
I found the problem! The answer was to copy both the stylesheet.css and the .woff and .woff2 files to the dist folder, then committing to github straightaway, before running trunk serve again.
I need to find a way to combine the trunk serve command with a shell script to copy the necessary files again, but it’s late and it can wait till the morning!
That’s correct, it’s actually got nothing to do with Netlify.
Trunk’s documentation does it differently than I’ve ever seen before, it mentions various HTML you can use to get it to copy files / directories to the dist folder:
