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 do to include this file so I can use it in my component?

@font-face {
  font-family: 'lcd-plain';
  src: url('/simaxx-front-end/src/main/webapp/src/assets/fonts/lcd-plain/lcd-plain.eot'); /* For IE */
  src: url('/simaxx-front-end/src/main/webapp/src/assets/fonts/lcd-plain/lcd-plain.ttf') format('truetype'), /* For Chrome and Safari */
  url('/simaxx-front-end/src/main/webapp/src/assets/fonts/lcd-plain/lcd-plain.woff') format('woff'); /* For FireFox */
  /*format("truetype"), url("/simaxx-front-end/src/main/webapp/src/assets/fonts/lcd-plain/lcd-plain.svg#LCD")*/
  /*format("svg");*/
}

svg.gauge {
  font-family: 'lcd-plain', Helvetica, Arial, sans-serif;
}

user_3786363 · Answer

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

user_2024590 · Answer

There is the src property, which can be a URL to a remote font file location or the name of a font on the user's computer. So if you serve your assets folder as static files and you have the fonts folder in there, you should be able to reference the font files relativly to your app's URL like this:

@font-face {
  font-family: 'lcd-plain';
  src: url('/fonts/lcd-plain/lcd-plain.ttf') format('truetype'),
}

Custom font import in Angular4

2 Answers