[CSS] 폰트 적용 방법 3가지

첫 번째로 ttf, otf파일로 직접 적용하는 방법이 있다.

우선 font-face로 폰트를 추가해줄 수 있고, 요소에서 font-family:지정한 이름으로 사용할 수 있다.

	@font-face {
		src:url(./fonts/Cafe24Ohsquare.ttf); /*폰트 경로 지정*/
		font-family: "cafe24ohsquare"; /*폰트 이름 지정*/
	}

구글 폰트로 적용

구글에서 제공하는 폰트를 다운로드할 필요 없이 가져와서 사용할 수 있다.

원하는 폰트를 선택 후 복사해서 가져오기만 하면 된다.html, css 중 원하는 걸 선택 후 가져올 수 있다. 

어썸 폰트

어썸 폰트는 폰트 보단 아이콘, 이미지 등을 사용하기 위해 주로 사용한다.

사용하기 위해선 라이브러리를 먼저 세팅 해주어야 한다.

라이브러리 세팅 : 구글검색: cdnjs > font-awesome > 라이브러리 선택 후 복사 > 붙여넣기

제일 상단에 위치한 https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css 를 사용했다.

이 것도 마찬가지로 스크립트를 복사 후 붙여 넣기만 해주면 된다.

라이브러리 세팅을 마쳤으면 원하는 아이콘, 이미지를 검색해서 사용할 수 있다.

이미지 검색 사이트 : Font awesome에서 검색 후 붙여넣기