Loading custom fonts

[polp6880]

I need to load a custom webfont (not coming from Google or any other CDN) into a Tailpress project.

I currently added the @font-face declarations in the custom.css file and the actual woff and woff2 files into the resources directory. When the Laravel Mix build is run, I can see that the woff and woff2 files are correctly placed in a fonts directory in the theme's root.

The issue however comes up as the generated app.css file is trying to load the font files from the project's root directory (/fonts/) and not the theme directory (/wp-content/themes/theme/fonts/).

What is the best way to go about this, please? Since the @font-face src URL will never match whatever is generated in the app.css - as far as I know at least.

Thanks!

[jeffreyvr]

Here is an example with custom fonts:

https://github.com/jeffreyvr/tailpress-custom-font-example

Things to do:

1. Set the source root (this will prevent 404’s):
   https://github.com/jeffreyvr/tailpress-custom-font-example/blob/master/webpack.mix.js#L4

2. Add your fonts in the fonts folder within ‘resources’:
   https://github.com/jeffreyvr/tailpress-custom-font-example/tree/master/resources

3. Add the needed font-face’s in the CSS:
   https://github.com/jeffreyvr/tailpress-custom-font-example/blob/master/resources/css/app.css

4. Define your custom font within the Tailwind config file:
   https://github.com/jeffreyvr/tailpress-custom-font-example/blob/master/tailwind.config.js#L26

[polp6880]

@jeffreyvr thanks a lot for taking the time to look into my request and also, for providing the detailed instructions!

I was missing step 1 and in step 3, I had the wrong path set. Both issues were fixed as soon as I followed the instructions provided.

[polp6880]

@jeffreyvr it seems that in the version I'm using, the font is trying to be loaded from wp-content/themes/fonts (not wp-content/themes/{theme}/fonts) when rendering the Gutenberg editor in the backend. This should give you a better idea: https://share.getcloudapp.com/8Lu5KlYn

Most probably, this could be already handled in the latest versions but just in case, is there a fix or a workaround for the version I'm using, please?

[jeffreyvr]

Only way I can think of, which is not ideal, is placing the fonts there too. You can do this with: https://laravel-mix.com/docs/6.0/copying-files

[polp6880]

Thanks @jeffreyvr - will try that and see what effects it has. Might also not include this at all eventually as the only difference I can see is that Gutenberg loads the default font rather than the custom ones... which is not the end of the world.

[vedantchaudhari]

@jeffreyvr Have these steps changed for the latest version of Tailpress?

npm run dev is throwing an error when I try to compile after adding the following line:

fontFamily: {
                sans: ['Inter', ...defaultTheme.fontFamily.sans]
            }

[jeffreyvr]

Just a quick note on this: the source root is now set by default in version 1.0.0.

[jnovak-SM2Dev]

@jeffreyvr Is there an easy way to get font awesome to work via npm without having to manually copy over the font files?

[jeffreyvr]

You can use https://laravel-mix.com/docs/6.0/copying-files to automate the copying of files

[jnovak-SM2Dev]

Thanks i'll take a look. There should probably be something like this built into the project. Ideally a framework like this should move images over and compress them, move over fonts, and allow you to add things to be moved from packages (such as the webfonts from font awesome). Any chance something like that is in the pipeline?

[jeffreyvr]

Not in the pipeline at the moment. But please share your tips / findings, might be interesting for others too.