What is the most correct way to import and use custom fonts in Sage 10?

sage
1

I know the question is pretty broad, but after reading all the previous discussions about custom fonts I still find issues making them work correctly locally and in production.

Using ~@fonts would make the path to the font not correct, while using ../resources/fonts/ would create issues building styles.
The only way I was able to display the fonts in production was by changing how .setPublicPath is set, which I think it’s not a good idea.

Thus, any hint would be incredibly welcome. Thank you for all the great work!

2

What about ~@fonts makes the path incorrect?

3

Hi @Log1x thanks for your reply. This is the path I get when calling it with ~@fonts

GET http://<redacted-locahost>/fonts/SourceSansPro-Regular.woff2 net::ERR_ABORTED 404 (Not Found)

4

It’s a good idea to set the public path. It should solve this issue.

5

Hi @ben that is indeed how my path is set.
At some point, just for testing, I tried to edit the path by making it match to the built font assets path (e.g. wp-content/<redacted-theme-name>/...). In this way in the production environemnt the fonts were showing, but I guess this is definitely not the way to go.

6

I’m having a hard time understanding you.

Why would you show us a truncated path as an example? What was the actual full path that you tried? It should look something like this:

  • /app/themes/your-theme-name/public (for Bedrock installs)
  • /wp-content/themes/your-theme-name/public (for regular WP installs)

It should start with a /. It should end with /public. It shouldn’t contain a path to a font directory.

You keep repeating that setting the public path isn’t the answer. That is incorrect. You must set the public path to the correct directory.

8

Hi Ben, I’m sorry if I wasn’t clear.

On an old simple WP install I tried /wp-content/themes/my-theme-name/public.

And, this is the path I have now, together with a Bedrock install: /app/themes/my-theme-name/public.

I wasn’t able to show the custom font in either cases. Especially now, using /app/themes/my-theme-name/public and calling the font with:

@font-face {
  font-family: 'Oswald';
  src: url('~@fonts/Oswald-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

I get the following error in my console: GET http://<my-local-url>/fonts/SourceSansPro-Regular.woff2 net::ERR_ABORTED 404 (Not Found). What I don’t understand is what step I’m missing or what I’m overlooking.

Thanks very much for your help!

9

You provided example code for a font face named Oswald but your 404 is for a different font entirely :confused:

It’s very difficult to piece this all together by the small bits of code that you’re providing on here. If you’d like to push up a git repo that has a minimal reproduction of your issue, then please share it.

10

I’m sorry, my mistake, it’s the same with the Oswald font though: GET http://<my-local-url>/fonts/Oswald-Bold.woff2 net::ERR_ABORTED 404 (Not Found)

The custom fonts are placed in /resources/fonts folder, so I’m just trying to understand what I’m doing wrong and if there’s some knowledge I’m missing.

11

If you’d like to push up a git repo that has a minimal reproduction of your issue, then please share it.