How to import local fonts

[osimosu]

Hi!

Great work on this project. I'm mainly a backend developer and this project is great for quickly designing a landing page.

One issue I've been struggling with is how to add a locally imported font as I'm not too familiar with gulp.

What I've done is;
Added a new font folder under src: \src\font\myfont\stylesheet.css

Then import in theme.css: @import "../font/myfont/stylesheet.css";

In the gulp.js, I also added this in the dist-assets task:
gulp.src('./src/font/**')
.pipe(gulp.dest('./dev/font'));

The problem is when building for prod: I get the error

'minify-css' errored after 426 ms
[08:08:54] Error: Ignoring local @import of "../font/myfont/stylesheet.css" as resource is missing.

Any tips and maybe add support for it ?

[holger1411]

Hi @osimosu !
Sorry for my late reply.

You should not import it into the theme.css file but in the source /src/scss/theme.scss
That will than generate your theme.css file from it and import the needed font styling.

For example, add this:
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400&display=swap');
somewhere into your theme.scss

than add this variable/value to src/scss/themes/base/_variables-theme.scss:
$font-family-sans-serif: "Inter";
to overwrite the default Bootstrap variable for the default font

[osimosu]

Actually, that was a typo. I did import the local font in theme.scss:

@import "../font/myfont/stylesheet.css";

Then i modified the gulp task dist-assets to copy it to dev folder:
gulp.src('./src/font/**')
.pipe(gulp.dest('./dev/font'));

This works during development (npm run watch). The issue arise when trying to build for prod (npm run build).

Maybe you could show an example of importing font from local folder (not from url).

[holger1411]

Hm, okay. Did you find your stylesheet.css file in the /public folder after "npm run build"? Just to narrow down if it is a path or a file transfer (from /dev to /public folder) problem

[osimosu]

npm run build fails to generate the public folder.

npm run build-dev copies the font folder (& stylesheet.css) to dev folder.

[holger1411]

Can you run "npm run prod-copy" after "npm run build-dev"? That just copies everything from dev -> public.
Than check if the file is present. Maybe the minify-css task just have problems with importing rules for css in scss...

[osimosu]

minify-css was failing to find the font assets... running dist-assets first fixed the issue.. check PR