HTML | 폰트 적용하기 @import, link 방식

정라잇 | 최근 수정일 : 22년 07월 11일

개요

폰트를 웹 사이트에 추가하여 디자인 요소로 넣으려면 약간의 설정이 필요합니다.
웹폰트를 서버에 올리는 방법은 총 두가지 방법이 있는데, 장단점이 있으니 골라서 사용하시면 됩니다.

다운로드 : 구글 폰트

로딩 방법

폰트 적용 방법

@import : CSS 파일에 코드 입력
<link> : HTML 문서에 코드 입력

두가지 방법에는 속도의 차이가 있습니다.

@import 는 .css 파일의 로드가 모두 완료 되어서야 폰트를 로드합니다. 두번째 방법인 <link>로 입력했을 경우는 웹 폰트만 로드하기 때문에 우선적으로 완료를 할 수 있습니다. 구조의 한계로 인해 <link> 방식이 빠를 가능성이 높습니다.

추천하는 방법은 <link> 웹폰트를 <head> 안에 넣습니다. CSS 링크보다 로딩이 더욱 빨라야 하기 때문에 상단에 위치해야 합니다. 그러면 CSS 로딩하기 전에 폰트 로딩이 완료되어 속도의 개선이 될 수 있습니다.

웹폰트 적용방법

구글 폰트에서 원하는 폰트 자체를 다운받을 수도 있지만, 코드 몇줄로도 웹 폰트로 자료를 넣는 방법이 있습니다. Select This style 을 클릭하면 스타일을 넣을 수 있는 코드를 볼 수 있게 됩니다.

마음에 드는 다른 폰트를 Select This Style 을 클릭하여 추가하면 위와 같은 화면을 볼 수 있습니다. <link> 방식은 HMTL 파일에 반영하는 방법이고, @import 방식은 CSS 파일에 반영하는 방법입니다.

@import 적용방법

/*CSS 파일 적용 방법*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;500;700&display=swap');
    
h1, h2, h3, h4, h5, h6, p {
    font-family: 'Noto Sans KR', sans-serif;
}

style.css 파일을 만들어 노토 산스 폰트를 <hn> 태그와 <p> 태그에 적용을 마칩니다. 이 작업을 완료하면 우리는 index.html 파일을 만들어야 합니다.

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;500;700&display=swap');

body, h1, h2, h3, h4, h5, h6, li, p, p a { 
	font-family: "Noto Sans KR", sans-serif; 
}

i, cite, em, var, address, dfn {
  font-family: 'Noto Sans KR', sans-serif;
}

h1 {
	letter-spacing: -.3px;
}

h2 {
	letter-spacing: -.3px;
}

h3, h4, h5, h6 {
  letter-spacing: -.3px;
}

body {
  letter-spacing: -.3px;
}

p {
    letter-spacing: -.9px;
}

li {
    letter-spacing: :-.3px;
}

제가 좋아하는 맑은고딕입니다. 깔끔한 글자표기로 많은 사랑을 받고 있어요

link 적용방법

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;500;700&display=swap" rel="stylesheet">

<style>
    h1, h2, h3, h4, h5, h6, p {
        font-family: 'Noto Sans KR', sans-serif;
    }
</style>

<p>라이트 코딩</p>

다른 방법으로 적용시키는 HTML 활용방법입니다. 물론 HTML에 <style> 태그를 활용하는 것은 권장하지 않습니다. 그렇지만 사용 방법을 익히기 위해 임시로 적용하도록 하겠습니다.

일반 스타일시트 적용방법

<link hef="/style.css" rel="stylesheet">

<p>라이트 코딩</p>

영어와 한국어 폰트 쪼개기

@font-face {
    font-family: 'Noto Sans KR', sans-serif;
    font-style: normal;
    font-weight: 300;
    unicode-range:U+0041-005A, U+0061-007A, U+0030-0039;
}

@font-face {
    font-family: 'Noto Sans KR', sans-serif;
    font-style: normal;
    font-weight: 300;
    unicode-range:U+AC00-D7A3;
}

전체 범위	U+0020-007E
영어 대문자 범위	U+0041-005A
영어 소문자 범위	U+0041-007A
한글 범위	U+AC00-D7A3
숫자 범위	U+0030-0039
특수 문자 범위	U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E

해당 코드를 unicode-range 에 맞추어 값을 추가하면 영어와 한글을 따로 관리할 수 있게 됩니다. 물론 숫자와 특수문자도 따로 관리할 수 있습니다.