2022년 9월 15일 목요일

웹에서 구글 Noto Sans KR 사용하기

아래 플러터의 경우도 그렇지만
브라우저도 저마다 기본 폰트가 다를수 있다.
그래서 그걸 통일하기 위해서 폰트를 통일해야하는데
귀찮다 폰트 알아보기도 싫고.. 뭐어쨌든 나중을 위해 그냥하는게 좋다.
그리고 notosankr를 사용하기 위해서 그냥 링크를 걸어도되는데

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

이런식으로 이용해서 하는방법이 있다.

그런데 이거는 한다리 거치는 거니까 패스하는게 맞다.
(인터넷이 빨라서 잠깐이지만 자세히보면 일단 브라우저 폰트로 한번표시하고
css 다 받으면 그때서야 폰트가 적용이되면서 변화가 느껴지고 여백도 다르게 바뀐다)

그래서 그냥 서버에서 폰트파일을 가지고 있는게 더 빠르다.
다음 사이트에서 Noto Sans KR을 검색하여 다운로드 할수 있다.


구글 웹폰트 헬퍼 링크


왼쪽위 검색창에 Noto Sans KR  을 검색하여 선택하면 해당폰트가 나오고
1~4 번까지 하라는데로 하면 된다. 

1.번에 korean 선택
2.번에 사이즈 전부 선택
3.번에 css 내용 복사해서 메모장에 붙혀넣고 css파일로 저장
4.번에 폰트파일 다운로드

이렇게 받은 파일을 내프로젝트에서 사용할수 있게 폴더구조를 만들고
기본은 (../fonts/ ) 니까 한단계 위로 가서 fonts폴더에서 폰트파일 찾음
3번에서 상대경로를 변경할수 있음..


이렇게 해서 전역에 적용되는 html 페이지에 스타일을 먹여주면 된다.

<link rel="stylesheet" href="~/css/noto_sans_kr.css" />

뭐 이런식으로 선언한다음

body {
  font-family: "Noto Sans KR";
}

이런식으로 사용


많이 활용하자..


댓글 없음:

댓글 쓰기