---
type: bookmarks
kind: Reference
tags: ['font', 'text', 'css']
status: release
ctime: 2022-04-09
mtime: 2026-10-06
generated: { by: claude/opus-5, at: 2026-07-28T02:12:37Z }
sources:
  - id: polypane-blog-creating-websites-with
    resource: https://polypane.app/blog/creating-websites-with-prefers-reduced-data/
    title: "Creating websites with prefers-reduced-data | Polypane, The browser for ambitious developers"
  - id: css-tricks-modifying-specific-letters-with
    resource: https://css-tricks.com/modifying-specific-letters-with-css-and-javascript/
    title: "Modifying Specific Letters with CSS and JavaScript | CSS-Tricks"
  - id: coding-dude-wp-css
    resource: http://www.coding-dude.com/wp/css/css-stroke-text/
    title: "Stroke Text CSS: 📕 The Definitive Guide - Coding Dude"
  - id: web-local-fonts
    resource: https://web.dev/local-fonts/
    title: "Use advanced typography with local fonts"
  - id: medium-microsoft-design-leading-trim-the
    resource: https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202
    title: "Leading-Trim: The Future of Digital Typesetting | by Ethan Wang | Microsoft Design | Medium"
  - id: fonts-google-knowledge
    resource: https://fonts.google.com/knowledge
    title: "Google Fonts"
  - id: textlab-posts-font-variant-numeric
    resource: https://textlab.dev/posts/font-variant-numeric
    title: "Using Font Variant Numeric"
---

import QuoteLink from '@components/QuoteLink.astro'

<QuoteLink url="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts">
  CSS fonts
</QuoteLink>

---

- [웹 폰트 빠르게 — 로딩 전략](/memo/172)
- [가변 폰트](/memo/173)
- [`FontFace` 로 아이콘 폰트 직접 로드 — `document.fonts.add()`](/memo/243)

---

- [Creating websites with prefers-reduced-data | Polypane, The browser for ambitious developers](https://polypane.app/blog/creating-websites-with-prefers-reduced-data/)[^171-1]
- [Modifying Specific Letters with CSS and JavaScript | CSS-Tricks](https://css-tricks.com/modifying-specific-letters-with-css-and-javascript/)[^171-2]
- [Stroke Text CSS: 📕 The Definitive Guide - Coding Dude](http://www.coding-dude.com/wp/css/css-stroke-text/)[^171-3]
- [Use advanced typography with local fonts](https://web.dev/local-fonts/)[^171-4]
- [Leading-Trim: The Future of Digital Typesetting | by Ethan Wang | Microsoft Design | Medium](https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202)[^171-5]
- [Google Fonts](https://fonts.google.com/knowledge)[^171-6]
- [Using Font Variant Numeric](https://textlab.dev/posts/font-variant-numeric)[^171-7]
- [Color Fonts - Get ready for the revolution!](https://www.colorfonts.wtf/)
- [How to Use Color Fonts on the Web](https://webdesign.tutsplus.com/tutorials/what-are-color-fonts--cms-31467)
- [Deep dive CSS: font metrics, line-height and vertical-align - Vincent De Oliveira](https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align)
- [Font size is useless; let’s fix it](https://tonsky.me/blog/font-size/)
- https://gwfh.mranftl.com/fonts/noto-sans-kr?subsets=korean,latin

폰트 만들기

- https://apps.apple.com/us/app/fontself-make-your-own-fonts/id1512959192
- https://glyphsapp.com/
- https://www.figma.com/community/file/1115382696459820988
- https://www.amygoodchild.com/blog/cursive-handwriting-in-javascript

---

[^171-1]: `prefers-reduced-data` 가능하다면
[^171-2]: 특정 문자 변경하기
[^171-3]: 텍스트 스타일
[^171-4]: 로컬 폰트 감지를 위한
[^171-5]: `leading-trim` — 글꼴이 갖고 있는 여분 공백 제거 (제안 단계)
[^171-6]: 목적에 따라 글꼴 고르는 법
[^171-7]: `font-variant-numeric` — 숫자·분수·서수의 대체 글리프 제어