[CSS] 웹 폰트 적용하기

웹폰트란?

컴퓨터에 폰트 설치여부와 관계 없이, 온라인 서버에서 폰트 파일을 다운로드 하여 화면에 노출되는 웹 전용 폰트를 말한다.

 

눈누, Google Fonts 등에서 웹폰트 주소를 복사해서 사용할 수 있다.

눈누

사이트에서 원하는 폰트를 클릭 후 → 웹폰트로 사용 코드 복사하기

※ 사용 조건, 범위 확인 후 사용하세요!

<p>hello</p>
<p id="change">hello</p> // 폰트가 변경될 부분

/* 복사한 코드 */
@font-face {
	font-family: 'Giants-Inline';
	src:
		url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-1@1.1/Giants-Inline.woff2')
		format('woff2');
	font-weight: normal;
	font-style: normal;
}

/* 사용 */
#change {
  font-family: "Giants-Inline";
}