워드프레스 사용자라면 사이트의 폰트 스타일에 대해 한번쯤 고민해보셨을 겁니다. 기본으로 설정된 테마의 폰트가 마음에 들지 않는다면, 추가 CSS 기능을 활용하여 원하는 폰트로 쉽게 변경할 수 있습니다. 이 글에서는 워드프레스에서 추가 CSS를 사용하여 기본 폰트를 변경하는 방법을 단계별로 안내해드리겠습니다.
워드프레스에서 추가 CSS란?
- 추가 CSS는 워드프레스 사이트의 디자인을 사용자 정의할 수 있는 강력한 기능입니다.
- 테마의 기본 스타일을 덮어쓰거나 새로운 스타일을 추가할 수 있습니다.
CSS (Cascading Style Sheets)는 웹 페이지의 디자인과 레이아웃을 정의하는 언어로, HTML과 함께 웹사이트를 만드는 데 사용됩니다. CSS를 사용하면 텍스트의 색상, 폰트, 간격, 열의 크기, 이미지의 배치 등 웹 페이지의 시각적 요소를 제어할 수 있습니다.
폰트 변경을 위한 CSS 코드 작성
- 원하는 폰트로 변경하기 위해서는 적절한 CSS 코드를 작성해야 합니다.
- 예를 들어, 전체 웹사이트의 폰트를 변경하려면
body태그에 대한 CSS 규칙을 설정합니다.
CSS코드를 제공하는 서비스들
- Google Fonts: 가장 인기 있는 웹 폰트 서비스 중 하나로, 수백 가지의 무료 폰트를 제공합니다. Google Fonts에서 원하는 폰트를 선택하고, 제공되는 링크 태그나 CSS
@import문을 웹사이트에 추가함으로써 해당 폰트를 사용할 수 있습니다. - Adobe Fonts: Adobe에서 제공하는 폰트 서비스로, 다양한 고품질 폰트를 제공합니다. Adobe Fonts는 Adobe Creative Cloud 구독자에게 무료로 제공되며, 웹 프로젝트에 폰트를 추가하기 위한 코드를 제공합니다.
- Typekit: Adobe Fonts로 알려진 이 서비스는 디자이너와 개발자를 위한 폰트 라이브러리를 제공합니다.
- Font Squirrel: 무료 웹 폰트를 제공하는 서비스로, 상업적 사용이 가능한 폰트들을 다운로드하거나, 웹사이트에 사용하기 위한 웹킷 생성기를 제공합니다.
- Fontspace: 개인 및 상업적 사용이 가능한 수천 개의 무료 폰트를 제공합니다.
- Fonts.com: 다양한 유료 및 무료 폰트를 제공하는 또 다른 서비스입니다.
import 코드 얻는 방법
Google Fonts : 가장 인기있는 웹폰트 서비스 중 하나로, 수백 가지의 무료 폰트를 제공하는 곳입니다.
아래 링크에서 원하는 폰트를 선택하고, 제공되는 링크태그나 CSS ‘@import’ 문을 웹사이트에 추가함으로써 해당 폰트를 사용할 수 있습니다.
구글 폰트에서 원하는 폰트를 검색하거나 선택합니다.
선택한 폰트 페이지에 들어와서 화면 우측 상단의 바구니 모양을 활성화 시켜서 우측 Selected family창을 켜줍니다.
화면을 아래쪽으로 내려보면 폰트의 여러 스타일들을 확인할 수 있는데요. 여기서 원하는 스타일을 찾아서 선택하면 우측 화면에 import코드가 생성됩니다.
워드프레스에 적용해야 하므로 우측에 생성된 import코드를 잘 복사해 둡니다. (style 태그는 제외하고)
워드프레스에 추가 CSS 적용하기
- 워드프레스 대시보드로 이동하여 ‘외모 > 사용자 정의하기 > 추가 CSS’ 섹션으로 이동합니다.
- 앞서 작성한 CSS 코드를 입력하고 ‘게시’ 버튼을 클릭하여 적용합니다.
주의사항 및 팁
- 사용하는 테마의 기본 스타일을 변경할 때는 주의가 필요합니다.
- 폰트를 변경할 때는 웹 접근성과 가독성을 고려하는 것이 중요합니다.
- 테마 업데이트 시 추가한 CSS가 유지되는지 확인하세요.
- 폰트를 많이 사용하면 웹페이지 속도가 느려집니다.