# 구글 Variable Fonts 지원 시작

> Clean Markdown view of GeekNews topic #608. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=608](https://news.hada.io/topic?id=608)
- GeekNews Markdown: [https://news.hada.io/topic/608.md](https://news.hada.io/topic/608.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2019-09-27T08:43:04+09:00
- Updated: 2019-09-27T08:43:04+09:00
- Original source: [developers.google.com](https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts)
- Points: 4
- Comments: 0

## Topic Body

웹상에서 폰트 크기를 줄이기 위해 몇개의 마스터 스타일을 지정하고, 축(axis)를 추가함으로써 수십개 이상의 파생된 인스턴스들을 생성하는 것.

CSS 를 통해서 각 Variation 을 선택 가능.

@supports (font-variation-settings: 'wdth' 200) {

  @font-face {

    /* https://github.com/TypeNetwork/Amstelvar */

    font-family: AmstelvarAlpha;

    src: url('../fonts/AmstelvarAlpha-VF.ttf');

    font-weight: normal;

    font-style: normal;

  }

  #font-amstelvar {

    font-family: AmstelvarAlpha;

    font-variation-settings: 'wdth' 400, 'wght' 98;

  }

}

## Comments



_No public comments on this page._