본문 바로가기

IT/Web

CSS 한글 폰트 선택하기 - 노토산스, NotoSansKR

세로 광고판 입니다

CSS 한글 폰트 선택하기 - 노토산스, NotoSansKR

웹화면에 한글을 위해 폰트선택은 필수!

 

[CSS]웹 폰트 적용하는 방법, 나눔고딕 웹에 적용

안녕하세요! 258입니다. 이번 포스팅에는 웹 폰트 적용하는 방법을 알려 드리려고 합니다! 웹 폰트 적용, ...

blog.naver.com

 

한글은 노토산스, 영문/숫자는 다른 폰트로 해주세요...👀 (feat. unicode)

노토 산스를 사용하다보면 영문과 숫자가 너무 날씬하다는 느낌을 받곤 했다.개인적인 취향으로 1 숫자 아랫부분에 있는 serif를 별로 좋아하지 않는다. 그밖에도 숫자에 볼륨감이 없어서 한글의 깔끔함에 비해서 영문과 숫자에 아쉬움들이 있곤했다. 글자간 커링도 작고, 카운터(속공간)도 작은 듯하고.. 그래도 점점 노토산스를 자주 애용하고 보다보니, 그

feel5ny.github.io

실제 적용 CSS

<link href="//fonts.googleapis.com/earlyaccess/hanna.css" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/earlyaccess/nanumgothic.css" rel="stylesheet" type="text/css">
<style type="text/css">

@font-face {
  font-family: "NotoSansKR";
  src: url("/fonts/NotoSans-Regular.woff") format("woff");
  font-style: normal;
}
@font-face {
  font-family: "NotoSansKR";
  src: url("/fonts/OpenSans-Regular.woff") format("woff");
  unicode-range: U+0020-007E;
  font-style: normal;
}

body {
    font-family: "NotoSansKR","Novacento Sans Wide", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
  //background: lightcyan;
  //font-size: 30px;
}

h1 {
    //font-family: 'Nanum Barun Gothic';
    font-family: "hanna","NotoSansKR","Novacento Sans Wide", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
    text-transform: none;
    //font-weight: bold;
}
h2, h3, h4, h5, h6 {
    font-family: "NotoSansKR","Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
    text-rendering: optimizeLegibility;
    color: #5e5e5e;
    font-weight: 400;
    letter-spacing: -1px;
}
</style>

바꾼 사이트의 폰트는 짜잔.