웹폰트
웹에서 폰트를 적용하기 위해서는 크게 두가지 방법이 있다. TTF, OTF파일과 같은 폰트 파일을 다운받은 뒤 서버에 저장을 시키고, 이 파일을 불러와서 적용하는 방식과 다운받는 것 없이 url을 이용해서 웹 폰트를 적용하는 방식이다. 이 두가지 방법 중에서 두번째 방법인 웹 폰트를 적용하는 방법에 대해서 알아보자.
웹 폰트 종류
가장 많이 사용하는 웹 폰트에는 구글 폰트와 눈누가 있다. 구글 폰트에는 영어, 한국어 모두 있고, 눈누에는 한국어 폰트가 주로 있다. 이 웹사이트에 가보면 많은 폰트가 있으니 만드는 웹사이트에 어울리는 폰트를 골라서 사용하면 된다.
구글 폰트 적용하기
구글 폰트 웹사이트 상단에 이름으로 폰트를 검색할 수 있고, 언어, 카테고리, properties들을 설정할 수 있다. 그렇게 해서 원하느 폰트를 찾아서 들어가면 된다.
원하는 폰트로 들어가면 font weight에 따른 글들이 나오는데 쓰고싶은 weight의 옆에 + Select this style을 누르면 된다. 꼭 한개가 아니더라도 여러 weight, 여러 폰트들에서 버튼을 눌러도 한번에 적용을 할 수 있다. 그 후에 구글폰트 오른쪽 상단에 있는 아이콘을 클릭하면 된다.
아이콘을 클릭하면 오른쪽에서 웹 폰트로 쓸 수 있는 코드가 나올 것이다. html에 적용시키기 위해서는 <link>를 보면 되고, 이번에는 CSS에 적용을 시키기 위해서는 @import의 코드를 복사해서 붙이면 된다.
CSS 가장 위에 @import 로 된 부분을 붙이고 폰트를 적용하고 싶은 부분에 font-family에서 import한 폰트를 적용하면 된다. 웹사이트 전체에 노토산스 폰트를 적용하는 경우 아래와 같은 코드를 사용하면 된다.
* {
font-family: 'Noto Sans KR', sans-serif;
}
눈누 폰트 적용하기
눈누에서도 구글 폰트와 같이 폰트를 검색하고 볼 수 있다.
이 중에서 마음에 드는 폰트를 선택하면 아래와 같이 폰트를 미리볼 수 있는 공간과 웹 폰트로 사용하는 코드, 다운로드 링크가 있다. 폰트를 다운받아서 사용하고 싶으면 다운로드 링크에 들어가서 ttf나 otf와 같은 파일을 다운받아서 설정하면 된다.
웹 폰트로 적용하기 위해서는 @font-face부분을 복사하여서 CSS가장 위에 붙여넣어 준다. 그리고 사용하고 싶은 부분에 font-family를 font-face에 설정된 이름을 사용하면 된다. 전체에 해당 폰트를 사용하는 경우면 아래와 같은 코드를 적용하면 된다.
@font-face {
font-family: 'SF_HambakSnow';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2106@1.1/SF_HambakSnow.woff') format('woff');
font-weight: normal;
font-style: normal;
}
* {
font-family: 'SF_HambakSnow';
}
'Front-End > CSS' 카테고리의 다른 글
[CSS] mobile address bar 포함하여 100vh 적용하기 + React, SCSS (0) | 2022.09.05 |
---|---|
[CSS] width에 padding, margin 포함시키기 (0) | 2022.08.03 |
[CSS] 가로, 세로 스크롤 없애기 (0) | 2022.07.28 |
[CSS] Font property font-family does not have generic default 해결 (0) | 2022.02.23 |
[CSS] CSS적용 안되는 경우, 크롬 강력 새로 고침 (1) | 2021.07.10 |
댓글