vinkla
commented
1 year ago I'm glad to hear that you have discovered WordPlate and are enjoying using it 😃
This is how I load fonts in WordPress, which is not only great for performance but was also recommended to me by an SEO company. Placing the fonts in resources/static directory will prompt Vite.js to automatically move them into the theme assets directory when you run the command npm run build.
<head>
<link rel="preload" href="<?= get_theme_file_uri('assets/fonts/inter-var-roman.woff2') ?>" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="<?= get_theme_file_uri('assets/fonts/inter-var-italic.woff2') ?>" as="font" type="font/woff2" crossorigin="anonymous">
<style>
@font-face {
font-family: 'Inter var';
font-weight: 100 900;
font-display: swap;
font-style: normal;
font-named-instance: 'Regular';
src: url(<?= get_theme_file_uri('assets/fonts/inter-var-roman.woff2') ?>) format('woff2');
}
@font-face {
font-family: 'Inter var';
font-weight: 100 900;
font-display: swap;
font-style: italic;
font-named-instance: 'Italic';
src: url(<?= get_theme_file_uri('assets/fonts/inter-var-italic.woff2') ?>) format('woff2');
}
</style>
</head>I highly recommend reading Lee Robinson's article to learn more about web fonts.
Hey, recently found out about WordPlate, started to use it and now I'm hooked. Super simple setup with great performance and developer experience.
I'm just having some smaller issues/problems setting up the fonts to load locally.
What I've done currently: I have installed the fonts locally (to my computer), so they will work on my browser.
For server setup: I've included a separate fonts file and loaded them using @font-face -- but I need to comment/uncomment for the production (npm run build). It feels potentially a crucial error, when I forget to uncomment the line (attached a screenshot).
All of this is happening in the index.js entry file, all other CSS & JS files are coming from there as well.
Solution 1: I could load the fonts from a CDN, like Google Fonts, but I prefer to have them locally setup (meaning on clients own server).
Preferred solution: Simply include the fonts in relative paths and all works in DEV & Production environment.
On dev: CSS path: resources/css/fonts.css JS path: resources/js/index.js Fonts path: resources/static/fonts
On Production: CSS path: public/themes/wordplate/assets/index-6debf16b.css JS path: public/themes/wordplate/assets/index-5889fd27.js Fonts path: public/themes/wordplate/assets/fonts
I tried all kinds of paths, but couldn't get it to work. Not sure what I'm missing.
This setup works for production: