new FontFace() 만으로는 글자에 안 쓰인다 — document.fonts 에 add() 해야 렌더링에 쓰이고, URL 소스는 자동으로 받지 않으니 load() 를 부른다.1

async function loader() {
  const family = 'Material Symbols Outlined'
  const source =
    'url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v75/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2)'
  const fontFace = new FontFace(family, source)

  document.fonts.add(fontFace)
  await fontFace.load()
}

Footnotes

  1. CSS Font Loading API - MDN: “A font face can be loaded either before or after it is added to a font face set, but it must be added to the set before it can be used for drawing.” / “Font faces with a URL source are validated but not automatically loaded” ↩

#font
`#243`