Replies: 1 comment
-
I can confirm that this works if I setup my angular project like illustrated below. I guess the only question I have is if this is the right way or if there is a better way? In my {
"assets": [
{
"glob": "**/roboto-latin-[345]*",
"input": "node_modules/@fontsource/roboto/files",
"output": "assets/fonts"
},
{
"glob": "**/*",
"input": "node_modules/@fontsource/material-icons/files",
"output": "assets/fonts"
}
]
} And then in my SCSS, I use the SCSS mixins like so: @use 'sass:map';
@use '@fontsource/roboto/scss/mixins' as Roboto;
@use '@fontsource/material-icons/scss/mixins' as MaterialIcons;
@include Roboto.faces(
$weights: (
300,
400,
500,
),
$subsets: (
latin,
),
$styles: all,
$directory: '/assets/fonts'
);
@include MaterialIcons.faces($directory: '/assets/fonts'); |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hello! I'm trying to see if there's a way to customize the output directory of the fontsource fonts in Angular. I'm using the
@fontsource/roboto
and@fontsource/material-icons
packages in an Angular 16 app with SCSS for styling and when I do an Angular prod build, it outputs the fonts to the root of the app next to all the generated source bundles. I prefer to serve those files out of my/assets/fonts
folder and I was wondering if there was any out-of-the-box functionality to customize that?An approach I'm thinking of taking is to use the SASS mixins to customize the directory and then use a custom entry in my Angular assets to manually copy the font files into that folder. I could probably get it working that way, but was looking for a more "idiomatic" way of doing this through fontsource if that exists. Any ideas?
Beta Was this translation helpful? Give feedback.
All reactions