안녕하세요
오늘은 Web 개발 시 디자인에서 가장 기본이 되는!!
글씨 폰트 설정하는 방법에 대해서 설명드릴께요~ ㅎㅎ
먼저 티스토리에서 사용하고 있는 기본 글씨체인
NotoSansKR을 적용하는 방법에 대해서 설명드릴께요~
(사실 업무에서 개발하고 있는 웹 사이트의 기본 폰트가 NotoSansKR이예요~ ㅋㅋㅋ)
제일 먼저 들어가볼 곳은 공홈이죠!! ㅎㅎ
NotoSansKR은 Google에서 제공하는 무료 글씨체 중에 하나로
공식 홈페이지는 다음과 같아요~
https://fonts.google.com/noto/specimen/Noto+Sans+KR
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
자~ 들어가면 아래와 같은 메인 페이지가 반겨주고 있고요!!
여기서 빠~~알~~간 네모 박스 보이시죠!!
Download Family 버튼을 클릭해서 해당 폰트 설정 파일을 먼저 받아주세요~
(파일을 받고 싶지 않으신 분들은 아래 더 좋은 방법 있으니 조금만 더 내려주세요!!)
아래는 NotoSansKR에 대한 글씨 폰트 정보예요~
예를 들어 Thin 100이라는 내용은
NotoSansKR에서 Thin은 굵기에 대한 정보이고,
100은 font-weight를 100으로 설정 시 Thin이라는 폰트가 적용된다는 의미예요
아래 내용과 디자인 참고하시면 좋더라구요~ :D
아래는 제가 업무로 작성한 CSS 설정 파일 캡처본이예요~
제가 개발하는 웹 사이트는 폐쇄망이어서 파일을 다운로드해서 설정하고 있어요!! ㅎㅎ
NotoSansKR 폰트 설정방법은 대표적으로 2가지가 있습니다!!
위에서 잠깐 언급했었으니 바로 본론으로 들어갈께요~
1. 파일을 Local에 다운 받아 함께 컴파일하고, 해당 경로를 지정해준다. (폐쇄망 웹 사이트일 경우 활용)
아래와 같이 설정하면 되며, [Path]에 실제 웹 상에서의 경로 지정해주면 됩니당~ ㅎㅎ
@font-face {
font-family: NotoSansCJKkr;
font-weight: 300;
src: local(NotoSansCJKkr-Light);
src: url([NotoSansCJKkr-Light.woff2 Path]) format("woff2"), url([NotoSansCJKkr-Light.woff Path]) format("woff"), url([NotoSansCJKkr-Light.otf Path]) format("opentype");
}
@font-face {
font-family: NotoSansCJKkr;
font-weight: 400;
src: local(NotoSansCJKkr-Regular);
src: url([NotoSansCJKkr-Regular.woff2 Path]) format("woff2"), url([NotoSansCJKkr-Regular.woff Path]) format("woff"), url([NotoSansCJKkr-Regular.otf Path]) format("opentype");
}
@font-face {
font-family: NotoSansCJKkr;
font-weight: 500;
src: local(NotoSansCJKkr-Medium);
src: url([NotoSansCJKkr-Medium.woff2 Path]) format("woff2"), url([NotoSansCJKkr-Medium.woff Path]) format("woff"), url([NotoSansCJKkr-Medium.otf Path]) format("opentype");
}
@font-face {
font-family: NotoSansCJKkr;
font-weight: 700;
src: local(NotoSansCJKkr-Bold);
src: url([NotoSansCJKkr-Bold.woff2 Path]) format("woff2"), url([NotoSansCJKkr-Bold.woff Path]) format("woff"), url([NotoSansCJKkr-Bold.otf Path]) format("opentype");
}
@font-face {
font-family: NotoSansCJKkr;
font-weight: 900;
src: local(NotoSansCJKkr-Black);
src: url([NotoSansCJKkr-Black.woff2 Path]) format("woff2"), url([NotoSansCJKkr-Black.woff Path]) format("woff"), url([NotoSansCJKkr-Black.otf Path]) format("opentype");
}
2. 웹 상에서 직접 URL로 받도록 설정한다. (일반 웹 개발 설정 시 편하게 적용)
아래 내용으로 적용하면 더 편하겠죠!!
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 100;
src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 300;
src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 400;
src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 500;
src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 700;
src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 900;
src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');
}
그럼 지금까지 UIC이가 소개하는 NotoSansKR 폰트를 웹 상에 적용하는 방법에 대해서 소개해드렸습니다.
20000~ BYE!!
댓글