CSS / 구글 웹폰트 사용하는 방법

CSS

구글에서 많은 웹폰트를 제공하고 있다. 어떻게 사용하는지, IE를 지원하는 방법은 무엇인지 알아본다.

1 글꼴 선택하고 코드 얻기
2 사용하기
3 IE에서 구글 웹폰트를 사용하는 방법

글꼴 선택하고 코드 얻기

구글 웹폰트에 접속한다. 한글 웹폰트가 필요하다면 Languages를 Korean으로 설정한다.

+ 버튼을 클릭하여 글꼴을 선택한다. 여러 개를 선택해도 된다.

아래에 있는 검은 색 바를 클릭한다.

구글 웹폰트를 사용할 수 있는 코드가 있는데, 기본 스타일 외에 다른 스타일을 선택하거나 한글을 사용하려면 CUSTOMIZE를 클릭한다.

필요한 스타일을 체크한다.

이제 코드를 복사한다. STANDARD와 @IMPORT 중 고를 수 있다.

사용하기

다음은 위에서 선택한 나눔 고딕을 사용한 간단한 예제이다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <link href="https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800&amp;subset=korean" rel="stylesheet">
    <style>
      p {
        font-family: "Nanum Gothic", sans-serif;
        font-size: 23px;
      }
      p.a {
        font-weight: 400;
      }
      p.b {
        font-weight: 700;
      }
      p.c {
        font-weight: 800;
      }
      p.d {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <p class="a">400 : Lorem Ipsum Dolor 하늘 바다 시나브로</p>
    <p class="b">700 : Lorem Ipsum Dolor 하늘 바다 시나브로</p>
    <p class="c">800 : Lorem Ipsum Dolor 하늘 바다 시나브로</p>
    <p class="d">bold : Lorem Ipsum Dolor 하늘 바다 시나브로</p>
  </body>
</html>

IE에서 구글 웹폰트를 사용하는 방법

IE는 2022년 6월 15일에 지원 종료되었다. Windows 11에는 IE가 없고, Windows 10에서 IE를 사용하려 하면 Edge 설치를 안내하므로, 특별한 경우가 아니면 IE는 무시해도 된다.
IE와는 무관하게, 구글 웹폰트를 다운로드 하는 방법은 알아두면 좋다.

구글 웹폰트의 CSS 소스는 다음처럼 되어 있다. woff2 형식의 웹폰트를 사용한다.

@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 400;
  src: local('NanumGothic'), url(https://fonts.gstatic.com/s/nanumgothic/v9/PN_3Rfi-oW3hYwmKDpxS7F_z-7r_xFtIsPV5MbNOyrVj67GNc972x-dpix2LdhN-iTB6aWWhDX3G.0.woff2) format('woff2');
  unicode-range: U+f9ca-fa0b, U+ff03-ff05, U+ff07, U+ff0a-ff0b, U+ff0d-ff19, U+ff1b, U+ff1d, U+ff20-ff5b, U+ff5d, U+ffe0-ffe3, U+ffe5-ffe6;
}

IE는 woff 형식의 글꼴을 지원하므로, IE를 지원하고 싶다면 woff 형식의 글꼴을 다운로드 받아 자신의 서버에 업로드해서 사용해야 한다.

google webfonts helper에 접속한다.
google webfonts helper는 구글 웹폰트를 다운로드할 수 있게 도와주는 사이트이다. woff 뿐만 아니라 eot, ttf, svg 등도 다운로드할 수 있다.

다운로드하려는 글꼴을 검색하고 클릭한다.

한국어를 나타내야 한다면 korean을 선택한다. 필요한 style도 선택한다.

글꼴을 다운로드 한다.

CSS / display 속성의 값을 inline 또는 inline-block으로 했을 때 여백 조정하는 방법

inline 또는 inline-block의 여백 display 속성값으로 inline 또는 inline-block으로 정하면 요소들이 가로로 배열됩니다. 이 때 요소와 요소 사이에 여백이 생깁니다. 예를 들어 다음과 같이 순서 없는 목록을 가로로 배열해보겠습니다.(여백을 파악하기 위해 테두리를 만들었습니다.) <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / font-size / 글자 크기 정하는 속성

CSS / 구글 웹폰트 사용하는 방법

구글에서 많은 웹폰트를 제공하고 있다. 어떻게 사용하는지, IE를 지원하는 방법은 무엇인지 알아본다. 글꼴 선택하고 코드 얻기 구글 웹폰트에 접속한다. 한글 웹폰트가 필요하다면 Languages를 Korean으로 설정한다. + 버튼을 클릭하여 글꼴을 선택한다. 여러 개를 선택해도 된다. 아래에 있는 검은 색 바를 클릭한다. 구글 웹폰트를 사용할 수 있는 코드가 있는데, 기본 스타일 외에 다른 스타일을 선택하거나 한글을 사용하려면 ...

CSS / IE에서 표의 셀 안의 이미지 크기 설정하는 방법

표의 셀 안에 200x200 크기의 이미지를 넣고, 셀의 가로 크기를 100px로 정해도, 이미지는 200x200 크기로 나옵니다. 셀의 크기에 맞게 이미지가 줄어들게 하는 방법은 두가지가 있습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { ...

CSS / overflow / 내용이 요소의 크기를 벗어났을 때 처리 방법 정하는 속성

개요 overflow는 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성입니다. 기본값 : visible 상속 : No 애니메이션 : No 버전 : CSS Level 2 문법 overflow: visible | hidden | scroll | auto | initial | inherit visible : 박스를 넘어가도 보여줍니다. hidden : 박스를 넘어간 부분은 보이지 않습니다. scroll : 박스를 넘어가든 넘어가지 않든 스크롤바가 나옵니다. auto : 박스를 ...

CSS / quotes / 인라인 인용문의 기호를 꾸미는 속성

q 태그는 문단 안에서 사용하는 인용문입니다. 기본 모양은 큰따옴표로 감싸는 것입니다. 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> </head> <body> <h1>Lorem <q>Ipsum</q> Dolor</h1> </body> </html> 인용문을 감싸는 큰따옴표를 다른 기호 또는 문자로 바꿔주는 것이 quotes 속성입니다. 예를 들어 ...

CSS / 양쪽 배분(균등 분할) 정렬 방법

문단 정렬을 양끝으로 꽉차게 하는 경우가 있습니다. 한글에서는 배분 정렬, 워드에서는 균등 분할이라고 합니다. 일반적인 문단에서는 거의 사용하지 않고, 표에서 제목을 넣을 때 많이 사용합니다. 하지만 CSS에는 그러한 정렬이 없습니다. text-align 속성의 justify가 있지만, 그건 빈 공간을 늘려서 양 끝으로 맞추는 게 아닙니다. 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> ...

CSS / 변수 사용하기

CSS 변수 CSS에 변수를 만들고 사용할 수 있습니다. 변수를 이용하면 여러 값을 한 번에 변경할 수 있습니다. 변수 선언 --variable-name: value; 변수를 정의하면, 변수를 정의한 요소와 그 하위 요소에서 그 변수를 사용할 수 있습니다. 만약 어느 곳에서나 사용할 수 있게 하려면 :root에 정의합니다. 변수 사용 property: var( --variable-name ) 예제 기본 변수 --my-color-1을 red로 설정하고 사용합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> :root ...

CSS / 메모

크롬에서 input에 생기는 파란색 테두리 없애는 방법 input에 무언가를 입력하려고 커서를 위치시키면 다음처럼 테두리가 생깁니다. :focus 선택자를 이용해서 없앨 수 있습니다. input:focus { outline: none; } iOS에서 input에 생기는 그림자와 둥근 테두리 없애는 방법 iOS에서는 input이 둥근 테두리로 나오고 그림자 효과가 있습니다. 이를 없애는 방법은 다음과 같이 스타일링하는 것입니다. input { -webkit-appearance: none; border-radius: 0px; } 가변폭 ...

CSS / 도형 만들기 / 삼각형

CSS로 삼각형을 만들 수 있습니다. 사용하는 속성은 border입니다. 여러 형태의 삼각형을 만들고, 그 삼각형을 회전하는 방법을 알아보겠습니다. 삼각형 만들기 기본 HTML 문서에 다음과 같이 내용이 없는 요소를 하나 만듭니다. <div class="triangle"></div> 가로와 세로의 크기를 0으로 만듭니다. 아래쪽, 왼쪽, 오른쪽에 테두리를 추가하면 사각형을 만들 수 있습니다. .triangle { width: 0px; height: 0px; border-bottom: 360px solid ...

CODING FACTORY

CSS / 구글 웹폰트 사용하는 방법

글꼴 선택하고 코드 얻기

사용하기

IE에서 구글 웹폰트를 사용하는 방법

Related Posts