Google에서는 웹 개발에 사용할 수 있는 다양한 폰트를 무료로 제공하고 있다.
오늘은 해당 폰트를 사용하는 방법에 대해서 간단히 정리해보도록 하겠다.
구글 폰트를 사용하기 위해서는 먼저 구글 폰트 사이트로 접속을 한다.
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
접근을 하게 되면 현재 Google에서 이용할 수 있는 폰트를 확인할 수 있으며, 보통은 자주 사용하는 폰트에 대해서 검색을 통해서 확인 할 수 있지만, Sort 기능을 이용해서 최신 Trend에 맞는 폰트라거나, 최신(Newest)등을 선택해서 정렬과 Catagories를 통해 사전에 분류를 활용하면, 보다 손쉽게 찾을 수 있다.
그리고 본인이 찾고자하는 폰트중 언어(Language)를 통해 각 나라별 지원하는 폰트가 다르다는 점도 폰트를 선택할 때 우선적으로 고려해야 한다는 점도 유의하자.
만약 마음에 드는 폰트를 확인하였다면, 해단 폰트를 클릭 통해 글씨의 굵기와 스타일등으로 나누진 스타일 정할 수 있다. 마음에 드는 스타일이 있다면, + Select this style 을 눌려 현재 선택 폰트가 Seleted family 창으로 이동하는데, 한번 선택한 폰트 아이템은 페이지를 이동해도 사라지지 않으니, 마음에 드는 폰트가 있다면 이러한 방법으로 계속 추가하도록 하자.
필자는 Roboto와 Anton 이라는 글꼴을 선택하였다. 이제 자신의 웹페이지에 적용할 차례이다.
적용을 위해서 구글에서 제공하는 Link 형태의 HTML 문장을 복사하도록 하자.
이 코드를 자신이 적용하고자 하는 HTML 페이지에 넣으면 되는데, Svelte 기준으로 /public/index.html에 적용하면 SPA로 작성한 경우 전체 적용이 가능하다. 그외 필요한 HTML 페이지가 있다면 아래와 같이 적용해 주면 된다.
이후 style 구문을 이용해서 font-family를 지정해 주면 실제 페이지에 적용된다.
필자가 선택한 Roboto와 Anton중 예제에서는 'Anton'을 선택했다. 'Anton'뒤에 sans-serif를 적어주는 이유는, 만약 폰트 사용이 어려운 경우 대체로 사용할 수 있는 폰트를 지정해줄 수 있는데, sans-serif로 기입을 해주면 사용자가 가지고 있는 폰트중에 고딕체를 우선시하게 된다.
이렇게 작성을 하고, 서버를 실행해보면, 아래와 같이 폰트가 적용된 것을 알 수 있다.
'Svelte' 카테고리의 다른 글
| SVELTESTRAP - Bootstrap 5, Svelte에서 사용하기 (0) | 2022.04.02 |
|---|---|
| Svelte URL 파라미터 사용 (0) | 2022.03.31 |
| Svelte - SPA routes 설정 (0) | 2022.03.30 |
| Svelte - 쓸만한 OpenSource Editor 찾기 (0) | 2022.03.28 |
| Svelte - Windows 환경 구성 NodeJS, Git, Visual Studio Code (0) | 2022.03.27 |
