# FontAwesome Pro + PostCSS

**URL:** <https://discourse.gohugo.io/t/fontawesome-pro-postcss/33894>\
**Category:** support\
**Tags:** tailwind, postprocess\
**Created:** [July 18, 2021, 5:58pm UTC](https://discourse.gohugo.io/t/fontawesome-pro-postcss/33894 "2021-07-18T17:58:08Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![OnIIcE](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/oniice/32/14827_2.png) [@OnIIcE](https://discourse.gohugo.io/u/OnIIcE)\
**Post date:** [July 18, 2021, 5:58pm UTC](https://discourse.gohugo.io/t/fontawesome-pro-postcss/33894/1 "2021-07-18T17:58:08Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [July 18, 2021, 7:07pm UTC](https://discourse.gohugo.io/t/fontawesome-pro-postcss/33894/2 "2021-07-18T19:07:32Z")

</div>

Have a look at:

> **[Hugo Pipes Introduction](https://gohugo.io/hugo-pipes/introduction/#readout)**
>
> Hugo Pipes is Hugo's asset processing set of functions.

---

<div class="post-metadata">

**Author:** ![OnIIcE](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/oniice/32/14827_2.png) [@OnIIcE](https://discourse.gohugo.io/u/OnIIcE)\
**Post date:** [July 18, 2021, 9:26pm UTC](https://discourse.gohugo.io/t/fontawesome-pro-postcss/33894/3 "2021-07-18T21:26:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [July 18, 2021, 9:49pm UTC](https://discourse.gohugo.io/t/fontawesome-pro-postcss/33894/4 "2021-07-18T21:49:12Z")

</div>

> [@OnIIcE](#):
>
> that seems to just talk about the asset compiling

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…

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

```

template

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

```

Now access those files at:

```auto
/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.

---

<div class="post-metadata">

**Author:** ![OnIIcE](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/oniice/32/14827_2.png) [@OnIIcE](https://discourse.gohugo.io/u/OnIIcE)\
**Post date:** [July 18, 2021, 10:09pm UTC](https://discourse.gohugo.io/t/fontawesome-pro-postcss/33894/5 "2021-07-18T22:09:55Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [July 18, 2021, 10:40pm UTC](https://discourse.gohugo.io/t/fontawesome-pro-postcss/33894/6 "2021-07-18T22:40:07Z")

</div>

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

> **[Configure Modules](https://gohugo.io/hugo-modules/configuration/#module-config-mounts)**
>
> This page describes the configuration options for a module.

---

<div class="post-metadata">

**Author:** ![divinerites](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/divinerites/32/12625_2.png) [@divinerites](https://discourse.gohugo.io/u/divinerites)\
**Post date:** [July 19, 2021, 4:02am UTC](https://discourse.gohugo.io/t/fontawesome-pro-postcss/33894/7 "2021-07-19T04:02:06Z")

</div>

> [@jmooring](#):
>
> Mount the node directory containing the fonts to `assets/fonts` .
> 
> [Configure modules](https://gohugo.io/hugo-modules/configuration/#module-config-mounts)

This is my setup

### config.toml

```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:

```auto
<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.

---

<div class="post-metadata">

**Author:** ![OnIIcE](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/oniice/32/14827_2.png) [@OnIIcE](https://discourse.gohugo.io/u/OnIIcE)\
**Post date:** [July 19, 2021, 9:36am UTC](https://discourse.gohugo.io/t/fontawesome-pro-postcss/33894/8 "2021-07-19T09:36:28Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![divinerites](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/divinerites/32/12625_2.png) [@divinerites](https://discourse.gohugo.io/u/divinerites)\
**Post date:** [July 19, 2021, 11:28am UTC](https://discourse.gohugo.io/t/fontawesome-pro-postcss/33894/9 "2021-07-19T11:28:28Z")

</div>

> [@OnIIcE](#):
>
> when mounting, why do I have to redeclare the defaults?

See [Configure Hugo modules | Hugo](https://gohugo.io/hugo-modules/configuration/#module-config-mounts)

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