What is the best option for loading fonts locally? #378
-
|
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: For server setup: All of this is happening in the index.js entry file, all other CSS & JS files are coming from there as well. Solution 1: Preferred solution: On dev: On Production: I tried all kinds of paths, but couldn't get it to work. Not sure what I'm missing. This setup works for production: |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments
-
|
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 <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. |
Beta Was this translation helpful? Give feedback.
-
|
Hey, thanks for the reply. I've changed a lot of projects I've been using I also ran some tests on Although that little extra step with the |
Beta Was this translation helpful? Give feedback.
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/staticdirectory will prompt Vite.js to automatically move them into the theme assets directory when you run the commandnpm 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> …