구글 폰트 사용하기

3974 단어 CSSCSS

1. 구글 폰트 사이트에서 원하는 웹 폰트 찾기

링크텍스트에 접속해 Language목록에서 Korean을 선택하고
Korean이 지원되는 폰트중 원하는 폰트를 골라서 클릭한다.

2. 웹 폰트 스타일 복사하기

폰트 페이지 오른쪽 아래에 있는 Select this style을 클릭 후 나오는 웹 폰트에서 @import를 클릭한다. 그리고 아래의 css rules는 CSS에서 font-family를 적용할때 복사하여 사용한다.
ex)

font-family: 'Nanum Gothic', sans-serif;

3. 웹 문서에 스타일 소스 넣고 결과 확인하기

@import 탭에서 link코드를 복사하여 HTML의 head 부분에 추가한다.
그리고 사용할 스타일에 위의 css rules에 적힌 코드를 복사한다.

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Google Fonts practice</title>
    <style>
		@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
        h1 {
          font-family: 'Nanum Gothic', sans-serif;
        }
	</style>
    <link rel="stylesheet" href="styles.css" />
  </head>

위의 코드내용은 Nanum+Gothic체를 구글폰트에서 가져오고 h1태그의 폰트를 'Nanum Gothic'으로 사용하는 것이다.

좋은 웹페이지 즐겨찾기