📎

CSS fonts

developer.mozilla.org

폰트 만들기

Footnotes

  1. prefers-reduced-data 가능하다면 ↩

  2. 특정 문자 변경하기 ↩

  3. 텍스트 스타일 ↩

  4. 로컬 폰트 감지를 위한 ↩

  5. leading-trim — 글꼴이 갖고 있는 여분 공백 제거 (제안 단계) ↩

  6. 목적에 따라 글꼴 고르는 법 ↩

  7. font-variant-numeric — 숫자·분수·서수의 대체 글리프 제어 ↩

#font#text#css
#171

요약하자면

몇몇 권장사항은 한글 폰트에서는 사실상 불가능한 부분이라 가능한 부분들을 적용하면 된다.

#font
#172

Footnotes

  1. 다크모드에서 weight가 시각적으로 차이가 날수 있기때문에 그럴경우 변수로 분리해서 대응하는 방법 ↩

#fontcodepen.io
#173

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