Custom font import in Angular4

Question

I use Angular4 and have a problem with making use of my custom font. I tried using font-face but it gives me the error that the font-file cannot be found. What do I need to

Answer 1

i believe the problem is in how angular reworks the paths in the components.

What i usually do is create a font folder under src and put my fonts there. I then create styles folder for my custom styles where i put a font.scss with the following:

$archistico-woff-font-path: "./fonts/archistico_bold-webfont.woff";
$archistico-woff2-font-path: "./fonts/archistico_bold-webfont.woff2";
$font-family-brand: 'archisticobold';

In my src folder there is a styles.scss. I import my fonts.scss and declare my font there

@import "./src/styles/fonts";
@font-face {
    font-family: 'archisticobold';
    src:url($archistico-woff2-font-path) format('woff2'),
        url($archistico-woff-font-path) format('woff');
    font-weight: normal;
    font-style: normal;
}

Hope it helps