govuk-frontend-docs/source/import-font-and-images-assets/index.html.md.erb at 572e22fb69ad67216f5f9c59b7b7197a54bf1800 · alphagov/govuk-frontend-docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
---
title: Import font and images assets
weight: 32
---

# Import font and images assets

To use the font and image assets from GOV.UK Frontend, you can either:

- serve the assets from the GOV.UK Frontend assets folder - recommended
- copy the font and image files into your application

## Serve the assets from the GOV.UK Frontend assets folder - recommended
- serve the assets from the GOV.UK Frontend assets folder (recommended)
- copy the font and image files into your application

## Serve the assets from the GOV.UK Frontend assets folder

Set up your routing so requests for files in `<YOUR-SITE-URL>/assets` are served from `/node_modules/govuk-frontend/dist/govuk/assets`.

For example if you use the web framework [Express.js](https://expressjs.com/), add the following to your `app.js` file:

```javascript
const path = require('path');
app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/dist/govuk/assets')))
```

## Copy the font and image files into your application

If you decide to copy the assets instead, copy these 3 items:

- `/node_modules/govuk-frontend/dist/govuk/assets/images` folder to `<YOUR-APP>/assets/images`
- `/node_modules/govuk-frontend/dist/govuk/assets/fonts` folder to `<YOUR-APP>/assets/fonts`
- `/node_modules/govuk-frontend/dist/govuk/assets/manifest.json` file to `<YOUR-APP>/assets`

You should use an automated task or your build pipeline to copy the files, so your project folder stays up to date when we update GOV.UK Frontend.

### If you have your own folder structure

If you use a different folder structure than `<YOUR-APP>/assets/images` and `<YOUR-APP>/assets/fonts`, you can [configure GOV.UK Frontend](/include-css/#configure-gov-uk-frontend) so that Sass builds the CSS according to your folder structure.

Configure the [`$govuk-assets-path`](/sass-api-reference/#govuk-assets-path) variable if your `font` and `image` folders have the same parent folder. For example:

```scss
@use "node_modules/govuk-frontend/dist/govuk" as * with (
  $govuk-assets-path: "/<YOUR-ASSETS-FOLDER>/"
);
```

Configure the [`$govuk-images-path`](/sass-api-reference/#govuk-images-path) and [`$govuk-fonts-path`](/sass-api-reference/#govuk-fonts-path) variables if your `font` and `image` folders have different parent folders. For example:

```scss
@use "node_modules/govuk-frontend/dist/govuk" as * with (
  $govuk-images-path: "/<YOUR-IMAGES-FOLDER>/",
  $govuk-fonts-path: "/<YOUR-FONTS-FOLDER>/"
);
```

You can also use your own function to generate paths, for example if you’re using `asset-pipeline` in [sass-rails](https://github.com/rails/sass-rails). Configure the [`$govuk-image-url-function`](/sass-api-reference/#govuk-image-url-function) and [$govuk-font-url-function](/sass-api-reference/#govuk-font-url-function) variables with the function you need to use.