string of only numbers not parsed correctly by CSS

Question

font.newFileName is a string of only numbers: '000001101', '000001102', '000001103', so on and so forth.

If font.newFileName in new FontFace and setProperty is prefixed with a letter or changed to a${font.newFileName}, the script works...

...

fontList.forEach(font => {

  const
    ff = new FontFace(font.newFileName, `url('${font.newFilePath.replace(/\\/g, '/')}')`),
    fontItem = fontItemTemplate.content.cloneNode(true),
    fontNameElement = fontItem.querySelector('.font-name')

  ff.load().then(
    () => document.fonts.add(ff),
    err => console.error('ERROR:', err)
  )

  fontNameElement.style.setProperty('--font-family', font.newFileName)
  fontNameElement.style.fontFamily = 'var(--font-family)'

  ...

Does anybody know why this is the case?

Also, is there some way to use the font.newFileName values as they are without having to prefix a letter to the front?

Answer 1

The CSS font-family property does not accept font names that start with a number(if unquoted)¹.

To make it work you can put it in quotes. Something like:

fontList.forEach(font => {
    // ...rest

  ff.load().then(
    () => document.fonts.add(ff),
    err => console.error('ERROR:', err)
  )

  fontNameElement.style.setProperty('--font-family', `'${font.newFileName}'`);
  fontNameElement.style.fontFamily = 'var(--font-family)'

  ...
});

---

References:

1. Valid Font Family names
2. Font Family property
3. Examples of valid identifier names^*

_{* Not related to this post but good to refer}

Answer 2

You don't really need prefixes if you make sure the value is kept a string inside the variable.

One way (among many) is to add quotes around it

var FontName = '123';

document.body.style.setProperty('--font-family', "'"+FontName+"'")
document.body.style.fontFamily = 'var(--font-family)'

@font-face {
  font-family: "123";
  font-style: normal;
  font-weight: 400;
  src: local("Inconsolata Regular"), local("Inconsolata-Regular"), url(https://css-challenges.com/wp-content/themes/ronneby_child/css/QldKNThLqRwH-OJ1UHjlKGlZ5qg.woff2) format("woff2");
}

body {
  font-size: 50px
}

Hello World