스퀘어스페이스 7.1 폰트 변경 방법 (사이트 스타일 + CSS)

스퀘어스페이스 7.1에서 사이트 스타일로 폰트를 바꾸고, 내 폰트 파일을 업로드하고, 커스텀 CSS로 요소 하나만 바꾸는 방법. 단계별 안내, 선택표, 문제 해결까지 담았습니다.

자주 묻는 질문

스퀘어스페이스 사이트 전체의 폰트는 어떻게 바꾸나요?

버전 7.1 사이트에서는 사이트 스타일(Site Styles)을 열고 폰트(Fonts)를 클릭한 다음, 추천 폰트 팩을 고르거나 모든 폰트 팩(All Font Packs)을 열어 산세리프, 세리프, 혼합 중에서 필터링하세요. 폰트 팩을 선택하면 제목, 본문, 버튼, 기타 텍스트의 폰트가 한 번에 설정됩니다.

스퀘어스페이스에서 모든 구글 폰트를 쓸 수 있나요?

폰트 드롭다운에서 이름으로 구글 폰트를 검색할 수 있지만, 스퀘어스페이스 고객센터에 따르면 모든 구글 폰트가 라이브러리에 있는 것은 아닙니다. 원하는 폰트가 없다면 라이선스가 허용하는 경우에 한해 폰트 파일을 직접 업로드할 수 있습니다.

스퀘어스페이스에 업로드할 수 있는 폰트 파일 형식은 무엇인가요?

사이트 스타일의 폰트 업로더는 OTF, TTF, WOFF, WOFF2 파일을 지원합니다. CSS 편집기와 함께 쓰는 별도의 커스텀 파일(Custom Files) 영역에는 TTF, OTF, WOFF만 표시되므로, WOFF2 파일은 CSS 파일 영역이 아니라 사이트 스타일 업로더를 사용하세요.

커스텀 폰트를 업로드하려면 허락이 필요한가요?

네. 스퀘어스페이스 고객센터는 사이트에서 폰트를 사용하려면 폰트 소유자 또는 라이선스 제공자의 허락이 필요하다고 안내합니다. 업로드하기 전에 웹 사용이 허용되는 라이선스인지 확인하세요.

내 사이트에서는 폰트 설정 단계가 왜 다르게 보이나요?

버전 7.0과 7.1 사이트는 폰트 설정이 서로 다릅니다. 이 가이드는 7.1 기준입니다. 7.0에서는 디자인 패널의 사이트 스타일에서 폰트를 변경합니다. 또한 스퀘어스페이스는 7.0에서 설정한 Adobe 커스텀 폰트가 7.1에서는 지원되지 않는다고 안내하므로, 이 경우 7.1에 내장된 폰트를 선택해야 합니다.

템플릿을 바꾸면 커스텀 CSS도 그대로 유지되나요?

스퀘어스페이스에 따르면 버전 7.0 사이트에서는 템플릿을 바꿀 때 커스텀 CSS가 이전되지 않습니다. 추가한 CSS는 따로 복사해 두었다가 필요할 때 다시 붙여넣으세요.

한 줄 요약: 스퀘어스페이스 7.1 사이트에서는 사이트 스타일(Site Styles)을 열고 폰트(Fonts)를 클릭한 다음, 폰트 팩을 고르거나 제목(Headings), 본문(Paragraphs), 버튼(Buttons), 기타(Miscellaneous)를 하나씩 설정하세요. 라이브러리에 없는 폰트는 같은 패널에서 직접 파일을 업로드하면 됩니다. 커스텀 CSS는 특정 요소 하나만 바꿔야 할 때만 사용하세요.

이 가이드는 스퀘어스페이스 고객센터에 안내된 버전 7.1 기준 단계를 다룹니다(2026년 11월 확인). 사이트가 버전 7.0이라면 패널 이름이 다르니, 뒷부분의 버전 안내를 참고하세요.

어떤 방법을 선택해야 할까요?

원하는 결과를 얻을 수 있는 가장 간단한 방법을 고르세요. 표의 아래로 갈수록 준비 작업이 늘어납니다.

원하는 것	추천 방법	난이도
클릭 한 번으로 전체 분위기 변경	사이트 스타일의 폰트 팩	낮음
제목과 본문에 서로 다른 폰트 적용	사이트 스타일에서 항목별 폰트 설정	낮음
특정 구글 폰트 사용	폰트 드롭다운에서 검색	낮음
라이선스를 보유한 브랜드 폰트 사용	폰트 파일 업로드	중간
제목 하나, 버튼 하나, 섹션 하나만 변경	커스텀 CSS	중간~높음

방법 1: 폰트 팩으로 폰트 바꾸기

폰트 팩은 모든 텍스트 항목에 어울리는 폰트를 한 번에 적용해 주기 때문에 사이트 분위기를 가장 빠르게 바꾸는 방법입니다.

편집기를 열고 사이트 스타일(Site Styles)(붓 모양 아이콘)을 클릭합니다.
폰트(Fonts)를 클릭합니다.
추천 팩 중 하나를 고르거나, 모든 폰트 팩(All Font Packs)을 클릭해 산세리프, 세리프, 혼합 중에서 필터링합니다.
패널을 닫기 전에 페이지를 스크롤하며 제목, 본문, 버튼이 어떻게 보이는지 확인합니다.

폰트 팩은 좋은 출발점이지만, 제목 폰트는 마음에 드는데 본문 폰트는 마음에 들지 않을 수도 있습니다. 이럴 때는 다음 방법을 사용하세요.

방법 2: 텍스트 항목별로 폰트 바꾸기

폰트(Fonts) 아래에서 스퀘어스페이스는 텍스트를 네 그룹으로 나눕니다. 각 그룹을 따로 설정할 수 있습니다.

제목(Headings): 페이지 제목과 텍스트 블록의 제목 스타일.
본문(Paragraphs): 본문 텍스트.
버튼(Buttons): 버튼 라벨.
기타(Miscellaneous): 캡션, 양식 라벨 같은 작은 텍스트(이 그룹의 정확한 적용 범위는 템플릿마다 다르므로, 변경 후 몇몇 페이지를 확인하세요).

하나를 바꾸려면 다음과 같이 합니다.

사이트 스타일 > 폰트에서 원하는 항목(예: 제목)을 클릭합니다.
폰트 드롭다운을 열고 이름으로 검색합니다.
폰트를 선택한 다음, 필요에 따라 스타일, 굵기, 크기 설정을 조정합니다.
Adobe Fonts를 사용하려면 목록 맨 아래의 Additional Fonts 링크를 이용하세요.

스퀘어스페이스에서는 다른 텍스트가 이를 기준으로 크기가 조절되는 기본 크기도 설정할 수 있습니다. 폰트를 바꾼 뒤 전체적으로 너무 크거나 작아 보인다면, 블록을 하나씩 조절하기 전에 먼저 기본 크기를 조정해 보세요.

실용적인 팁: 제목과 본문은 따로따로 바꾸세요. 둘을 한꺼번에 바꾸다가 어딘가 어색해 보이면 어느 쪽이 원인인지 알 수 없습니다. 어울리는 조합을 고르는 데 도움이 필요하다면 웹사이트 폰트 고르는 법 가이드를 참고하세요.

방법 3: 내 폰트 업로드하기

브랜드에서 쓰는 폰트가 라이브러리에 없다면 직접 업로드하세요. 스퀘어스페이스는 이 방식으로 폰트를 사용하려면 폰트 소유자 또는 라이선스 제공자의 허락이 필요하다고 안내합니다.

OTF, TTF, WOFF, WOFF2 형식의 폰트 파일을 준비합니다. 사이트 스타일 업로더는 네 가지 형식을 모두 지원합니다.
사이트 스타일 > 폰트를 열고 항목(또는 폰트 드롭다운)을 선택한 다음 업로드 옵션을 찾습니다.
업로드된 폰트 패널에 파일을 끌어다 놓거나, 더하기(+) 아이콘을 클릭해 컴퓨터에서 파일을 선택합니다.
원하는 항목에 업로드한 폰트를 적용합니다.
게시한 뒤 실제 사이트를 데스크톱과 휴대폰에서 열어 폰트가 제대로 불러와지는지 확인합니다.

인터페이스 문구는 수시로 바뀌므로, 버튼 이름이 다르게 표시되면 폰트 드롭다운 안에서 업로드 또는 더하기 아이콘을 찾아보세요.

업로드할 때 자주 생기는 문제

폰트가 목록에는 보이지만 모양이 이상합니다. 파일에 굵기나 스타일(볼드, 이탤릭)이 빠져 있을 수 있습니다. 사용할 굵기마다 각각 별도의 파일로 업로드하세요.
편집기에서는 되는데 방문자에게는 적용되지 않습니다. 게시된 페이지를 강력 새로고침하고, 폰트 파일의 웹 사용 라이선스를 확인하세요.
WOFF2 파일을 업로드한 뒤 CSS 파일 영역에서 불러오려고 했습니다. CSS 편집기의 커스텀 파일(Custom Files) 영역은 폰트 형식으로 TTF, OTF, WOFF만 표시하며 WOFF2는 표시하지 않습니다. WOFF2는 사이트 스타일 업로더를 사용하세요.

방법 4: 커스텀 CSS로 요소 하나만 바꾸기

사이트 스타일은 항목별로 사이트 전체의 폰트를 바꿉니다. 제목 하나만 다른 폰트를 쓰는 것처럼 예외가 필요할 때는 커스텀 CSS가 해결해 줍니다. 스퀘어스페이스의 CSS 가이드는 다른 변경이 레이아웃을 깨뜨릴 수 있으므로 CSS는 폰트, 색상, 배경에만 사용하라고 안내합니다.

먼저 방법 3으로 폰트를 업로드하거나 라이브러리 폰트를 골라, 사이트에서 해당 폰트를 쓸 수 있는 상태로 만듭니다.
Website > Pages > Custom CSS를 엽니다(정확한 경로는 사이트마다 조금 다를 수 있습니다).
아래와 같은 규칙을 붙여넣고 저장합니다.

```css /* Example: make every H2 use a font that is already on your site */ h2 { font-family: "Your Font Name", serif; letter-spacing: 0.02em; }

/* Example: change button text only */ .sqs-button-element--primary { font-family: "Your Font Name", sans-serif; } ```

"Your Font Name"은 사이트 스타일에 표시된 정확한 폰트 이름으로 바꾸세요. 대체 폰트(serif 또는 sans-serif)를 함께 지정해 두면 폰트를 불러오지 못해도 텍스트를 읽을 수 있습니다. 클래스 이름은 템플릿과 스퀘어스페이스 업데이트에 따라 달라질 수 있으니, 브라우저의 검사 도구로 대상 요소의 선택자를 확인하세요.

CSS를 한 페이지에만 적용하려면 스퀘어스페이스 고객센터에 페이지 단위 옵션이 안내되어 있습니다. 사용하기 전에 최신 단계를 그곳에서 확인하세요.

게시 전 폰트 체크리스트

이 목록을 복사해 한 번 점검해 보세요.

[ ] 제목과 본문에 사용한 폰트 패밀리가 두 가지 이하입니다.
[ ] 본문이 데스크톱뿐 아니라 휴대폰에서도 읽기 편합니다.
[ ] 사용하는 모든 굵기(보통, 굵게, 이탤릭)를 해당 폰트가 지원합니다.
[ ] 업로드한 폰트는 웹에서 사용해도 되는 라이선스를 갖고 있습니다.
[ ] 버튼과 양식 라벨의 폰트가 나머지 페이지와 어울립니다.
[ ] 추가한 커스텀 CSS의 사본을 저장해 두었습니다.
[ ] 편집기 미리보기가 아니라 실제 게시된 사이트를 확인했습니다.

버전 7.0과 7.1의 차이

스퀘어스페이스 고객센터는 7.1 폰트 옵션이 7.1 사이트에 적용되며 7.0 사이트에는 별도의 폰트 설정이 있다고 안내합니다. 7.0에서는 디자인 패널의 사이트 스타일에서 폰트를 변경합니다. 이전을 고민 중이라면 스퀘어스페이스에 업데이트 도구가 있으며, 스퀘어스페이스 리뷰에서 현재 편집기가 어떤지 살펴볼 수 있습니다. 폰트가 여러 불편 중 하나라면 스퀘어스페이스 대안 페이지에서 다른 빌더를 확인하고, 비용 분석에서 스퀘어스페이스 사이트에 드는 총비용을 확인하세요.

새 사이트를 시작한다면

템플릿을 고르거나 처음부터 사이트를 만들 때는 타이포그래피를 먼저 정하세요. 나중에 고치는 것보다 훨씬 쉽습니다. We.Inc의 무료 플랜에서는 준비된 템플릿으로 최대 3개의 사이트를 게시할 수 있으며, 프롬프트로 사이트 초안을 만들어 주는 AI 빌더는 월 $20의 Starter 플랜부터 이용할 수 있습니다. 여기에서 가입하세요.

무료로 시작하기 · 신용카드 필요 없음

Umair Ali Sadaqat

We.Inc 설립자

Umair는 We.Inc의 설립자입니다. AI 웹사이트 제작, 에이전시, 웹 스튜디오 운영 사업에 관해 글을 씁니다.

멋진 것을 만들 준비가 되셨나요?

하나의 플랫폼에서 출시하고 성장하고 자동화하는 15,000+개 비즈니스가 We.Inc를 사용합니다.