Custom fonts import

If you are using custom fonts and want a clean setup with UIkit and Less/CSS you can do it like this.

1 - Create folder fonts in assets/app/custom/elements/ and add your fonts there.

2 - Go to assets/app/custom/elements/_import.less and file import your custom fonts, at the top of the file.

assets/app/custom/elements/_import.less
# If you are compiling with advanced LESS setup (yarn compile)
@font-face {
font-family: 'MyFont';
src: url('fonts/myfont.woff2') format('woff2');
}
# If you are compiling with Theme Styler
@font-face {
font-family: 'MyFont';
src: url('../../../custom/elements/fonts/myfont.woff2') format('woff2');
}

The other option would be to create file fonts.less in assets/app/custom/elements/fonts folder, add @font-face for fonts in it, and than import that

assets/app/custom/elements/_import.less
# If you are compiling with advanced LESS setup (yarn compile)
@import "fonts/fonts.less";
# If you are compiling with Theme Styler
@import "../../../custom/elements/fonts/fonts.less";

If you are using version prior to Zero One version 2.0.0

1 - Create folder fonts in assets/app/custom/elements/ and add your fonts there.

2 - Go to assets/app/custom/elements/variables.less and delete this line

assets/app/custom/elements/variables.less
@internal-fonts: 'https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400&family=Maven+Pro:wght@700&display=swap';

3 - Go to assets/app/custom/elements/_import.less and delete these lines

assets/app/custom/elements/_import.less
@internal-fonts: ;
.font() when not (@internal-fonts = ~'') {
@import (css) url('@{internal-fonts}');
}
.font();

4 - Now instead deleted code in top of the assets/app/custom/elements/_import.less file import your custom fonts.

assets/app/custom/elements/_import.less
# example
@font-face {
font-family: 'MyFont';
src: url('fonts/myfont.woff2') format('woff2');
}

The other option would be to create file fonts.less in assets/app/custom/elements/fonts folder, add @font-face for fonts in it, and than import that

assets/app/custom/elements/_import.less
@import "fonts/fonts.less";