[HTML/CSS] 웹 상에서 원하는 폰트를 적용해보자 | 폰트 다운로드 | google fonts

윈도우/맥OS 상에 기본으로 설치되어 있지 않은 폰트를 웹상에서 구현하고 싶을 때,

google fonts를 참고하자.

fonts.google.com

[

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

](https://fonts.google.com)

원하는 폰트를 검색하고,

오른쪽에 select this style을 클릭.

원하는 몇가지의 폰트를 선택한 뒤,

오른쪽 위의 아이콘을 클릭하면, 선택한 항목의 폰트에 대한 html/css embed 코드가 생성된다.

복사한 뒤, html사이에 다음과 같은 형식으로 복붙한다.

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300&family=Montserrat:wght@100&family=Sacramento&display=swap" rel="stylesheet"> 

이를 완성하면, html 실행시 해당하는 폰트가 없으면, google font 사이트에서 실시간으로 다운로드해 적용시켜준다.

body {
    margin: 0;
    text-align: center;
    font-family: 'Merriweather', serif;
}

css에 적용하는 형식이다. 마찬가지로 google font에서 생성되는 코드를 복붙하기만 하면 된다.