FontAwesome Pro + PostCSS

support
,
1

Does anyone know the correct way to setup a Hugo, using PostCSS to move fonts into public when building - but also be served locally in memory when running in local dev server?

I want to use some fonts from my FA pro sub, so have set up my css file to import them and then I have tried postcss-url but that seems to only want to copy the files to a location, then the pathing doesn’t work. Manually setting up a copy to public will get out of hand and then would’t work for local dev.

2

Have a look at:

3

Thanks - but that seems to just talk about the asset compiling, which is all working. Just not sure on the configuration for the moving/extraction of the embedded assets in the css. I think the config will need to be done in the postcss config file

4

No, it doesn’t, but perhaps I don’t understand exactly what you’re trying to accomplish.

Let’s say you have some fonts in your assets directory…

assets/
└── fonts/
    ├── bar.ttf
    └── foo.ttf

template

{{ range (resources.Match "fonts/*") }}
  {{ $noop := .RelPermalink }}
{{ end }}

Now access those files at:

/fonts/foo.ttf
/fonts/bar.ttf

If you don’t want to use the assets/ directory, place them in the static/ directory, and you don’t need any template code.

5

Ahh I see. I’m getting the fonts via their npm package, and having an @import line in my css file. So the fonts are actually relative to their location in the node modules folder. I want to avoid a manual copy of them into the assets folder and having them source controlled.

The PostCSS config is correctly importing the css - however the fonts are left behind in the node modules folder in both dev and prod mode.

6

Mount the node directory containing the fonts to assets/fonts.

1 Like
7

This is my setup

config.toml

# Latest fontawesome
#   $ hugo mod get github.com/FortAwesome/Font-Awesome@5.15.1
[[imports]]
  path = "github.com/FortAwesome/Font-Awesome"
  disable = false
  [[imports.mounts]]
    source = "css"
    target = "assets/css/fa-v5"
  [[imports.mounts]]
    source = "webfonts"
    target = "static/webfonts"
    # Utiliser "static/css/webfonts" si CSS autonome et pas concat avec autres css.

and then, I can use css/fa-v5/all.min.css as I want in my css partials/pipes.

And for the font I can do for example:

<link rel="preload" href="/webfonts/fa-regular-400.woff2" as="font" crossorigin="anonymous" >
<link rel="preload" href="/webfonts/fa-solid-900.woff2" as="font" crossorigin="anonymous" >
<link rel="preload" href="/webfonts/fa-brands-400.woff2" as="font" crossorigin="anonymous" >

Note : Use target = "static/css/webfonts" if your css is used as is, and not concat with other css thru pipes.

2 Likes
8

Brilliant! Thank you @jmooring and @divinerites - this solves my problem perfectly!

One last question - when mounting, why do I have to redeclare the defaults? Is there not a way to just have my custom ones appended?

9

See Configure Hugo modules | Hugo

“When you add a mount, the default mount for the concerned target root is ignored: be sure to explicitly add it.”