HTML 폰트 적용

HTML에 외부 폰트를 적용하는 것은 외부 스타일시트를 적용하는 것처럼 link를 통하여 가능하다.

무료로 사용이 가능한 구글 웹폰트를 예로들자면

https://fonts.google.com/

Google Fonts

해당 홈페이지에서 원하는 폰트를 선택한다. (단, 한국어 폰트 적용을 원할 시 언어를 한국어로 해야 한다.)

이후 select 표시를 클릭하면

우측 화면에 link 코드를 볼 수 있으며 해당 코드를 복사하여 HTML 파일의 헤드 태그에 붙여 넣는다.

이후 스타일시트 내에서 적용 원하는 곳의 font-family를 해당 폰트의 이름으로 바꿔준다.

웹주소상에는 띄어쓰기가 적용되지 않아 +와 같은 형태로 나타내는 경우가 있으며

스타일 시트 내에 적용 시에는 띄어쓰기로 입력하면 된다.

ex)
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Single+Day&display=swap" rel="stylesheet">

<style type="text/css">
	p {
		font-family: "Single Day";
	}
</style>