사이트에 내가 원하는 폰트 적용하는 방법(ft.구글 웹 폰트)

7. 봉드로이드_개발공부

by 마켓플레이어, 마케터 봉 2024. 10. 3. 11:12

대부분의 사이트는 기본 폰트를 사용하지만, 뭔가 브랜드 아이덴티티를 위해 특정 폰트로 모든 메세지를 통일하고 싶다면?

보통 자사몰을 운영하면서 웹폰트를 사용하는데, 조금 더 깔끔한 디자인을 위해 폰트를 일괄 적용하는 경우가 있다.

굉장히 쉬운 방법이라 기록 겸 공유한다.

1. 구글 웹 폰트 사이트에 접속한다.

2. 원하는 폰트를 선택한다.

나는 Nanum Gothic을 선택했다.

그럼 위 이미지처럼 나오는데, 오른쪽 상단의 [Get font] 버튼을 누른다.

3. 폰트 우측에 있는 [Get embed code]를 클릭한다. 다른 페이지로 넘어갔어도, 우측 상단의 장바구니 아이콘을 누르면 된다.

** 번외로, 여러 폰트를 선택해도 된다. 단, 그러면 폰트마다 어디에는 이 폰트, 어떨땐 저 폰트 지정해줘야 한다. 일단 전체를 a라는 폰트로 하고, 특정 영역에서만 b라는 폰트를 쓰게 하는 경우도 있다. 근데 개인적으로 전체 폰트는 통일하는 게 맞는 것 같다.

4. <head>영역에 아래 네모 표시한 코드를 넣고, CSS의 <style>~</<style>에는 밑에 밑줄 친 부분을 넣는다.

넣은 이미지는 다음과 같다. 7번째 줄과 11~13번째 줄에 들어가 있다. 폰트의 전체 적용을 위해 <style>에 클래스를 지정하는게 아닌, * { }을 써서 전체 사이트에 적용되도록 했다.

특정 영역 불투명도 조절하는 방법(linear-gradient) (0)	2024.10.04
부트스트랩 사용 방법(사이트 손 쉽게 꾸미기) (0)	2024.10.04
css 파일 분리는 어떻게 해야하나요? (0)	2024.10.03
html, css, javascript 이게 뭔가요? (8)	2024.10.02
VS CODE 설치하기 (2)	2024.10.02