Astra 테마 폰트 지정하기 / Astra 테마는 속도나 편의성 때문에 GeneratePress 테마와 함께 많이 쓰이는 워드프레스 테마입니다. 더구나 Astra 테마는 무료 버전에서도 폰트를 비롯한 많은 것을 사용자 정의하기를 통해 비교적 자유롭게 설정할 수 있어 편리합니다.
Astra 테마 폰트 지정하기
보통 워드프레스 블로그의 폰트를 바꾸려면 사용자 정의로 들어가 추가 CSS 설정을 바꿔주는 방법을 사용합니다. 그러려면 어느 정도 지식이 필요합니다. 하지만 Astra 테마는 폰트를 커스터마이징할 수 있는 옵션이 다양하기 때문에 간단하게 끝낼 수 있습니다.
1. 사용자 정의하기
먼저 사용자 정의하기로 들어가 글로벌 > 글자 메뉴를 차례로 선택합니다. 폰트 종류와 크기를 정할 수 있는 선택지가 주르륵 나옵니다.
가. Presets
Astra 테마 무료 버전은 6가지 타이포그래피 프리셋을 제공합니다. 잘 어울릴만한 글꼴 조합을 미리 만들어 놓은 것으로, 그저 선택하기만 하면 바로 블로그에 적용되는 편리한 기능입니다.
위에 있는 굵고 큰 글씨는 제목, 그 아래 작은 글씨는 본문 폰트를 보여줍니다.
한 가지 유의할 것은, 프리셋 기능을 사용하면 사이트의 모든 글꼴이 바뀐다는 것입니다. 만약 헤더에 보이는 사이트 제목을 로고 이미지가 아닌 텍스트로 지정해 놓았다면 조심해야 합니다. 적용해 놓은 글꼴 대신 프리셋에 지정된 폰트로 보이게 되니까요.
아래 동영상은 아스트라 테마의 프리셋을 어떻게 적용하는지 보여줍니다.
나. 베이스 폰트
이곳에서 수동으로 글꼴을 선택해 적용할 수 있습니다. 베이스 폰트는 바디 폰트와 헤딩 폰트 둘로 나뉩니다. 폰트 패밀리, 폰트 종류와 굵기, 크기까지 마음대로 설정할 수 있어 편리합니다.
바디 폰트를 변경하면 사이트 전체 폰트가 바뀝니다. 본문 글꼴 변경은 여기서 하면 됩니다.
헤딩 폰트를 바꾸면 헤더의 블로그 제목 글꼴까지 바뀌니 유의하세요.
다. Heading Font (제목 글꼴)
여기서 말하는 헤딩은 본문 내부에 보이는 제목을 가리킵니다. H1부터 H6까지 폰트 종류와 크기, 굵기 등을 각각 지정할 수 있습니다. 이 블로그에서 H2는 Noto Serif Kr, Semi-Bold 600, 28px로 지정되어 있습니다.
라. 기타
여기서 문단 하단 마진과 링크가 포함된 글자에 밑줄을 넣을지 말지도 선택할 수 있습니다.
2. 폰트 컬러
글자 종류와 굵기, 크기를 정했으면, 이번에는 글자 색상을 지정할 차례입니다. 사용자지정 > 글로벌 > 색상으로 이동합니다. 여기서 아스트라 테마의 모든 색상을 지정할 수 있습니다.
가. Links
하이퍼링크가 연결된 부분의 글씨 색깔을 지정할 수 있습니다. 이 블로그에서는 보통 때는 파랑이었다가 마우스를 가져다 대면 빨강으로 바뀌도록 지정했습니다.
나. Heading
제목 색상도 지정할 수 있습니다. 블로그 글에서 H1은 맨 위에 나오는 제목 하나만이어야 합니다. 그 외에 본문에 나오는 제목은 H2부터 시작해야 합니다.
3. 웹폰트
워드프레스 테마가 주로 영어 등 로마자에 맞춰 디자인되다 보니, 멋져 보이는 테마를 적용해도 한글을 쓰게 되면 또 생각했던 것과 달라 보일 때도 있습니다. 이럴 때 여러 가지 폰트를 적용해 보고 어울리는 걸 고를 수 있으면 좋을 텐데, 쉽지 않죠.
오늘 소개해드린 방법을 사용하면 다양한 웹폰트를 시험 적용해보고 고를 수 있어 좋습니다. 읽는 사람의 기기에 어떤 폰트가 깔려있든 상관 없이 내가 보여주고 싶은 글꼴로 보여줄 수 있는 데다 저작권 걱정도 없어 좋습니다.
나눔바른고딕 같은 San Serif가 깔끔하고 예쁘지만, 긴 글을 읽기에는 아무래도 Serif가 덜 피곤하고 눈에 잘 들어옵니다. 헤더에 나오는 블로그 제목과 중간에 나오는 H3을 제외하고는 모두 Noto Serif Kr로 통일했습니다.
4. 추가 CSS 이용 방법
혹시 Astra 테마가 아닌 다른 테마를 이용하는 중이라 위에서 말씀드린 방법을 사용할 수 없다면, 직접 추가 CSS에 몇 줄 넣어주면 됩니다.
구글 폰트로 들어가서 둘러보고 마음에 드는 폰트를 선택한 다음, 복사해서 추가 CSS에 넣어주면 됩니다.
▶︎ 구글 웹폰트
▶︎ 사용자 정의하기 > 추가 CSS
Astra 테마는 무료 버전도 코딩에 대해 잘 몰라도 이용하기 쉽게 구성되어 있어 편리합니다. 업데이트될수록 마음에 드는 방향으로 진행되어 기분 좋네요.
Astra 테마 관련 글
Astra 테마 카피라이트 문구 매년 자동으로 바꾸는 방법