[CSS] 폰트 변경: 사이트 이미지를 결정짓는 중요한 요소

게시일: 24. 04. 12. 수정일: 24. 12. 24.

소요 시간: 2분 조회수: 53

사이트의 이미지를 결정짓는 데 있어 폰트는 매우 중요한 역할을 합니다. 텍스트가 많은 웹 페이지에서 폰트 하나만 바뀌어도 사이트의 전반적인 느낌이 크게 달라집니다. 이를 잘 보여주는 예로 애플 홈페이지의 제품 소개 글을 들 수 있습니다. 애플의 기본 폰트와 일반 기본 폰트를 비교했을 때, 단순히 폰트를 변경했을 뿐인데도 전혀 다른 인상을 주는 것을 볼 수 있습니다. 이런 폰트의 힘을 누구나 쉽게 활용할 수 있습니다.

이번 글에서는 무료로 원하는 폰트를 찾고 웹 페이지에 적용하는 방법에 대해 알아보겠습니다.

구글 폰트 소개

다양한 폰트를 제공하는 여러 사이트가 있지만, 이번 글에서는 구글 폰트를 중심으로 설명하겠습니다. 구글 폰트는 무료로 다양한 폰트를 제공하며, 여러 가지 장점을 가지고 있습니다.

구글 폰트의 장점

빠른 로딩 속도: 구글 폰트는 전 세계에 분산된 서버를 통해 빠르게 폰트를 불러올 수 있습니다.
다양한 폰트 제공: 다양한 스타일과 굵기의 폰트를 무료로 사용할 수 있습니다.
다양한 언어 지원: 여러 언어의 캐릭터 셋을 지원하여 한글 폰트도 쉽게 찾을 수 있습니다.
브라우저 호환성: 모든 브라우저에서 최적화된 폰트를 자동으로 선택하여 제공합니다.
다양한 적용 방법: HTML, CSS, zip 파일 등 여러 방법으로 폰트를 불러올 수 있습니다.

구글 폰트를 웹 페이지에 적용하는 방법

1. 구글 폰트 선택하기

먼저, 구글 폰트 웹사이트에 접속하여 원하는 폰트를 선택합니다. 언어를 'Korean'으로 설정하면 한글 폰트를 보다 쉽게 찾을 수 있습니다. 여러 굵기와 스타일을 선택할 수 있으며, 이는 나중에 CSS에서 활용할 수 있습니다.

2. 폰트 적용 방법 선택하기

구글 폰트에서는 CSS @import 방법과 HTML <link> 태그 방법 두 가지를 제공합니다. 여기서는 CSS @import 방법을 사용하겠습니다. 아래와 같이 폰트 URL을 복사하여 CSS 파일에 추가합니다.

@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&display=swap');

3. 폰트 속성 적용하기

이제 복사한 폰트 속성을 CSS 파일의 적절한 위치에 추가합니다. 예를 들어, 전체 본문에 폰트를 적용하려면 아래와 같이 작성합니다.

body {
  font-family: 'Nanum Gothic Coding', monospace;
}

결론

이 글에서는 구글 폰트를 사용하여 웹 페이지에 폰트를 적용하는 방법을 알아보았습니다. 구글 폰트는 무료로 다양한 폰트를 제공하며, 상업적으로도 사용할 수 있습니다. 따라서 사이트의 분위기를 바꾸거나, 로고와 같은 중요한 텍스트에 독특한 폰트를 적용하는 데 매우 유용합니다.

자주 묻는 질문

Q: 구글 폰트는 상업용으로 사용이 가능한가요?

이와 같은 과정을 통해 웹 페이지에 적합한 폰트를 적용하여 사이트의 전반적인 이미지를 개선해 보세요.