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;
}

score 17 · Accepted Answer · answered Jan 10 '18 at 23:57

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

score 3 · Answer 2 · edited Sep 28 '17 at 09:53

3

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'),
}

edited Sep 28 '17 at 09:53

Quentin Laillé

125
1
12

answered Sep 28 '17 at 09:50

Hinrich

13,485
7
43
66

Thank you for the answer! However I get the error that the directory cannot be resolved :( I have included the assets folder, which contains my fonts-folder, in the angular-cli.json inside assets as: "assets": [ "assets", "fonts", "favicon.ico" ] – viddrawings Sep 28 '17 at 10:19
When do you get the error? At compile time, or at runtime? What does the error exactly look like? – Hinrich Sep 28 '17 at 11:08
My IDE (webstorm) causes the problem. It doesn't recognize the path and I don't get the correct font to display when I run the application. – viddrawings Sep 28 '17 at 11:17
Try to navigate to http://localhost:4200/fonts/lcd-plain/lcd-plain.ttf or whatever the url might look like in your case. The fonts should be served by the devserver. If not, try to figure out fom there. – Hinrich Sep 28 '17 at 11:48
It goes to my google docs viewer and show the font, so the path you gave me is correct. – viddrawings Sep 28 '17 at 12:16

Custom font import in Angular4

2 Answers2

Linked