커스텀 위젯에 웹폰트(구글 폰트)를 적용하고 싶어요

위젯에 사용할 폰트는 사이트에 먼저 설치한 뒤, 위젯 CSS에서 이름만 불러오면 적용돼요.

단, 외부 폰트를 불러올 경우 라이센스를 반드시 확인해 주세요. 

웹폰트(구글폰트) 설치하기

웹폰트 설치 방법은 기존의 가이드를 참고해 주세요

설치 코드의 font-family에 적힌 이름을 기억해 주세요. 위 예시에서는 GmarketSansBold예요. 위젯 CSS에 이 이름을 똑같이 입력해야 하며, 한 글자라도 다르면 폰트가 적용되지 않아요.

1. 사이트와 같은 폰트를 쓰고 싶을 때

위젯 CSS에 font-family를 입력하지 않으면 사이트 폰트가 그대로 적용돼요. 별도의 설정은 필요하지 않아요.

의도를 코드에 남기고 싶다면 inherit을 입력해 주세요. 결과는 같아요.

.my-widget {
  font-family: inherit;
}

특정 요소만 사이트 본문 폰트로 되돌리고 싶다면 사이트 폰트 변수를 사용할 수도 있어요.

.my-widget .description {
  font-family: var(--unit-style--font-family);
}

사이트 본문 폰트는 한/중/일 글꼴과 영문 글꼴을 나누어 설정할 수 있는데, 이 변수 하나에 두 설정이 모두 반영돼 있어요. 영문은 영문 글꼴이, 한글은 한/중/일 글꼴이 자동으로 적용되므로 나누어 입력하지 않으셔도 돼요.

2. 특정 부분만 다른 폰트를 쓰고 싶을 때

위젯 전체는 inherit으로 두고, 바꾸고 싶은 요소에만 폰트 이름을 입력해 주세요.

/* 위젯 전체는 사이트 폰트를 따라가요 */
.my-widget {
  font-family: inherit;
}

/* 제목만 다른 폰트로 지정해요 */
.my-widget .title {
  font-family: 'GmarketSansBold', inherit;
  font-weight: 700;
}

폰트 이름 뒤에 inherit을 함께 적어 주세요. 폰트 이름이 잘못되었거나 폰트를 불러오지 못했을 때 글자가 깨지지 않고 사이트 기본 폰트로 표시돼요.

함께 확인해 주세요

1. 위젯 CSS에서는 폰트를 직접 불러올 수 없어요

   위젯 CSS에 @import url('<https://fonts.googleapis.com/>...')을 입력하면 폰트가 적용되지 않아요. 위젯은 보안을 위해 외부 스타일시트를 불러오지 못하도록 제한하고 있어요.

   구글 폰트를 포함한 모든 웹폰트는 1번 단계처럼 환경설정 > SEO에서 설치하고, 위젯에서는 이름만 불러와 주세요.

2. 위젯 제목이 사이트 제목과 다른 폰트로 보일 경우, 추가 작업이 필요해요

   사이트의 제목 폰트는 사이트 본문의 제목에만 적용되기 때문에, 위젯 안의 제목에는 본문 폰트가 적용돼요. 위젯 제목도 사이트 제목과 맞추고 싶다면 해당 폰트의 이름을 직접 입력해 주세요.

   .my-widget h2 {
     font-family: 'BlackHanSans', inherit;
   }
   

   이때 관리자에 표시되는 한글 이름이 아니라 CSS용 영문 이름을 입력해야 해요. 예를 들어 검은고딕은 BlackHanSans로 입력해 주세요.

   • 아임웹 기본 폰트의 CSS 이름 확인하기

     • imweb Sans → imweb Sans
     • 검은고딕 → BlackHanSans
     • 나눔스퀘어 → NanumSquare
     • 나눔스퀘어 라운드 → NanumSquareRoundR
     • 나눔바른고딕 → NanumBarunGothic
     • 나눔명조 → NanumMyeongjo
     • 본고딕 → Noto Sans Korean
     • 본명조 → SourceHanSerifKR
     • 스포카 한 산스 → Spoqa Han Sans
     • 에스코어 드림 → S-CoreDream-4Regular
     • 여기어때 잘난체 → Jalnan
     • 서울남산체 → SeoulNamsanJungM
     • 경기천년바탕 → GyeonggiBattang
     • 리디바탕 → RIDIBatang

   • 목록에 없는 폰트는 사이트에서 해당 글자를 마우스 오른쪽 버튼으로 클릭한 뒤 검사를 선택하면 font-family 값에서 확인할 수 있어요.

3. 폰트가 적용되지 않으면 폰트 이름을 확인해 주세요

   대부분 폰트 이름이 설치할 때와 다르게 입력된 경우예요. 대소문자와 띄어쓰기가 정확한지, 이름에 공백이 있다면 'Noto Sans KR'처럼 따옴표로 감쌌는지 확인해 주세요.

   개발자 도구에서 --unit-style-font_family처럼 이름이 비슷한 변수가 보일 수 있는데, 이 변수에는 폰트 이름이 아닌 내부 관리용 값이 들어 있어 폰트가 적용되지 않아요. 사이트 폰트를 불러올 때는 대시가 두 개인 --unit-style--font-family를 사용해 주세요.