blogger, blogspot에서 내가 원하는 폰트로 바꾸기

2023. 3. 16.

by. 문익점

Blogger 글꼴(폰트) 바꾸기

블로그스팟에서는 기본적으로 테마별로 제공하는 폰트를 사용하고 있습니다. 이는 CSS의 폰트 속성으로 전역적으로 적용하는 경우도 있고 홈 페이지, 글 자세히보기 페이지 별로 다르게 적용하는 경우도 있습니다.

이 글은 내가 원하는 폰트로 적용하는 법을 안내합니다.

글꼴을 변경하기 위해서는 블로그스팟의 관리 페이지에 로그인한 후, 테마 > 맞춤설정 옆 토글 버튼 > HTML 편집을 클릭합니다. 원하는 글꼴을 추가하기 위해서 다음과 같은 코드를 추가해야 합니다. <head> 태그안에 적절하게 추가합니다.

<link rel="stylesheet" as="style"  href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css" />

이는 cdn 서버에 올라가 있는 폰트를 다운받아서 폰트를 변경하는 방식입니다.즉 인터넷에 업로드 된 폰트를 받아오는 코드입니다. <link... 형태를 따르고 있습니다.

'폰트이름 cdn' 키워드로 네이버나 구글에 검색 시 찾을 수 있습니다. 저는 Pretendard를 사용하였습니다. (https://github.com/orioncactus/pretendard#%EC%9B%B9%ED%8F%B0%ED%8A%B8)

이 테마는 기본적으로 roboto로 설정되어 있어 편집기에서 'roboto'로 검색하여 지정된 모든 값들을 'Pretendard'로 변경해주었습니다. 방금 head 추가해놓은 font-family가 Prentendard이기 때문입니다.

즉 다운받은 폰트의 font-family가 무엇인지 알아내어 기본적으로 지정된 이름에서 변경해주면 됩니다. 코드를 추가한 후에는 저장을 클릭하여 적용합니다.

이후 블로그를 확인해보면 글꼴이 변경된 것을 확인할 수 있습니다.

글꼴을 변경할 때 주의해야 할 점이 있습니다.

첫째, 테마에서 기본적으로 제공되는 폰트가 있어 js코드와 CSS 코드가 엉키면 에러로 사이트가 뻗어 제대로 작동하지 않을 수 있습니다.

둘째, 테마 '맞춤설정'에서 폰트 크기를 전역적으로 설정할 때 작동하지 않을수 있습니다.

블로그스팟에서 글꼴을 변경하는 방법을 살펴보았습니다. 글꼴을 적절히 활용하여 블로그의 분위기를 더욱 다채롭게 표현해보세요!

1년차 프론트엔드 개발자가 들은 면접 질문 모음 공유 (네카라쿠배, 시리즈 b~c 기업) (0)	2022.03.08
React 선언적으로 모달 처리 with Portal (0)	2022.02.24
웹 접근성 개선하기 - 코로나 백신 통계 사이트 (lighthouse 점수 올리기) (2)	2022.02.07
WAI-ARIA - 접근성 (0)	2022.02.06
프로그래머스 - 고양이 사진첩 애플리케이션 (0)	2022.01.12

이 글을 본 사람들도 관심있게 본 글