CSS 폰트 관련 정리


created_at : 04 June 2022 - less than 1 min read time
Tags: CSS

Table of Contents

폰트를 한글과, 영어 다르게 적용하기

source : wazacs

unicode-range로 지정할 수 있다.

@font-face {
  font-family: "NanumSquare";
  src: url("https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css");
  unicode-range: U+AC00-D7A3;
}
body {
  font-family: "NanumSquare";
}

unicode-rage 에 범위를 적용시켜주면 원하는 범위에 따른 폰트가 다르게 적용된다. 다음은 자주 사용하는 유니코드 범위이다.

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

웹 폰트 적용하는 방법

CDN 사용

@font-face {
  font-family: "NanumSquare";
  src: url("https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css");
  unicode-range: U+AC00-D7A3;
}
body {
  font-family: "NanumSquare";
}

ex ) 눈누

image

웹폰트로 사용으로 되어 있는 곳에서 복사해서 해당 url을 @font-face에 넣는다

ex ) Google 웹 폰트

  • link

    <head>
  <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&display=swap"
    rel="stylesheet"
  />
</head>

    font-family: "Noto Sans KR", sans-serif;

  • @import

    <style>
  @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100&display=swap");
</style>

    font-family: "Noto Sans KR", sans-serif;

다운받은 폰트 파일 사용

  • 파일을 다운로드 받은 후 원하는 폴더에 넣는다
  • url에 해당 폰트 파일의 경로를 기입한다.
<style>
  @font-face {
    font-family: "hiffy";
    src: url("assets/font/hiffy.ttf") format("truetype");
    font-weight: 400;
  }
  body {
    font-family: "hiffy";
  }
</style>

💙You need to log in to GitHub to write comments.💙