2

I have tried to bind dynamic font-family to text. But I face a problem that a font name start with a number cannot be bind to DOM element. I've done a lot of research but I cannot find why it happens.

Template:

<h2 [style.font-family]="font">Hello {{name}}</h2>

Component class:

constructor() {
    this.name = `Angular! v${VERSION.full}`;
    this.font = '28 Days Later';
}

With font "Arial", DOM generate fine: enter image description here

But, it seems to ignore generating font "28 Days Later" enter image description here

Here is Plunker

I appreciate any suggestion, thanks in advance!

Hamed Baatour
  • 6,664
  • 3
  • 35
  • 47
Nguyen Tran
  • 1,158
  • 1
  • 11
  • 18

1 Answers1

3

It's pretty simple, just use your font like this:

 this.font = "'28 Days Later'";
halfer
  • 19,824
  • 17
  • 99
  • 186
Hamed Baatour
  • 6,664
  • 3
  • 35
  • 47
  • 1
    Thanks for your answer. I also found the reason why it happens. A font-family with text only "Arial", it can work without ' '. But font-family start with a number we must use ' ' to wrap it. – Nguyen Tran Jun 10 '17 at 11:41