Angular 2 ngStyle cannot bind font-family start with a number

Question

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:

But, it seems to ignore generating font "28 Days Later"

Here is Plunker

I appreciate any suggestion, thanks in advance!

Answer 1

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

 this.font = "'28 Days Later'";