프로처럼 Squarespace에 사용자 정의 글꼴을 추가하는 방법

Squarespace에 사용자 정의 글꼴을 추가하고 싶으십니까?

Squarespace 사용자라면 플랫폼에 몇 가지 견고한 글꼴 옵션이 제공된다는 것을 이미 알고 있습니다. 그러나 Squarespace 웹사이트에 글꼴을 추가해야 하는 이유는 많습니다!

일반적으로 브랜드 글꼴이거나 사용자가 만든 맞춤 글꼴입니다.

아마도 웹 사이트 내의 요소에 대해 만들고자 하는 특정 모양에 관한 것일 수 있습니다.

이유가 무엇이든 사용자 정의 글꼴을 Squarespace에 추가하는 것은 쉽습니다. 이 과정을 따르기만 하면 됩니다!

Squarespace 웹사이트에 사용자 정의 글꼴을 추가하는 방법

Squarespace 웹사이트에 선택한 글꼴을 추가하는 것은 매우 간단하지만 추가해야 할 CSS가 약간 있습니다.

시작하기 전에 그렇게 하는 것이 괜찮은지 확인하거나 누군가를 잡으십시오.

1단계. 글꼴 선택

사용하려는 글꼴을 이미 선택한 경우 다음 단계로 건너뜁니다. 그렇지 않으면 블로그에서 합법적으로 사용할 수 있는 글꼴을 선택했는지 확인하세요.

Creative Market과 같이 무료 및 유료 글꼴을 찾을 수 있는 곳이 많이 있습니다. 그러나 웹사이트에 라이선스를 추가하기 전에 라이선스를 확인하십시오.

2단계. 웹 글꼴 파일 준비

웹사이트에 글꼴을 추가하려면 세 가지 글꼴 파일 형식이 필요합니다.

1. .ttf 또는 .otf
2. .woff
3. .woff2

웹 글꼴 파일 유형이 있는 경우가 있는데 이 경우 이 단계를 건너뛰십시오. 그것만 사용하시면 됩니다.

그렇지 않으면 세 가지 파일 형식을 추가할 준비가 되어 있어야 합니다.

3단계. 글꼴 파일을 Squarespace에 업로드

디자인 > 사용자 지정 CSS > 사용자 지정 파일 관리로 이동합니다.

여기에서 업로드 버튼을 통해 글꼴을 추가합니다.

세 파일 모두에 대해 또는 웹 글꼴 파일이 있는 경우 이 파일을 반복합니다.

4단계. Squarespace에서 사용자 정의 글꼴 이름 지정

글꼴이 업로드되면 CSS 편집기를 사용하여 Squarespace에 글꼴이 어디에 있고 무엇인지 알려야 합니다.

다음 코드를 사용하십시오.

 @font-face { font-family: 'font-name'; src: url(URL.ttf/.otf), url(URL.woff), url(URL.woff2); }

이것을 가져 와서 글꼴에 대한 관련 정보를 추가하십시오.

• 글꼴 이름: 파일 이름이나 기억할 이름을 기반으로 글꼴 이름으로 바꾸십시오.
• 글꼴 URL: 방금 업로드한 글꼴의 URL로 바꾸십시오. 업로드 영역에서 URL을 가져오고(이미지 URL과 동일한 방식으로) 이를 제자리에 추가합니다.

5단계. 사용자 정의 글꼴을 사용해야 하는 위치 및 방법 정의

마지막으로 웹사이트에서 다른 글꼴을 사용할 위치를 Squarespace에 알려야 합니다.

이것은 헤더나 사이트 헤더, 버튼 또는 뉴스레터 블록과 같은 위치에 있을 수 있습니다.

일반적인 장소에서 글꼴을 사용하는 방법

글꼴을 업로드한 후에는 Squarespace에 글꼴 사용 위치에 대한 특정 정보를 제공할 수 있습니다.

다음은 몇 가지 인기 있는 예와 방법입니다.

사이트 헤더 글꼴을 변경하는 방법

사이트 헤더는 탐색 모음 상단의 영역입니다.

여기에 많은 링크, 텍스트 로고 및 공지 사항이 있을 수 있습니다.

이 모든 글꼴은 다음 CSS 스니펫을 사용하여 변경할 수 있습니다.

 // Site Title // .header-title-text a { font-family: YOURNAME !important; } // Site Navigation // .header-nav-item a { font-family: YOURNAME !important; } // Button // .header-actions-action .btn { font-family: YOURNAME !important; } // Announcement Bar // .sqs-announcement-bar-url a { font-family: YOURNAME !important; }

YOURNAME을 글꼴 이름으로 바꾸는 것을 잊지 마십시오.

버튼 글꼴을 변경하는 방법

사용자 정의 글꼴을 사용하는 또 다른 인기 있는 장소는 웹사이트의 버튼입니다.

버튼 블록은 Small, Medium, Large의 세 가지가 있습니다. 다음 코드를 사용하여 하나 또는 모두를 변경할 수 있습니다.

 // Small Button // .sqs-block-button-element--small { font-family: YOURNAME !important; } // Medium Button // .sqs-block-button-element--medium { font-family: YOURNAME !important; } // Large Button // .sqs-block-button-element--large { font-family: YOURNAME !important; } // Image Block Button // .image-button a { font-family: YOURNAME !important; }

YOURNAME을 글꼴 이름으로 바꾸는 것을 잊지 마십시오.

나중에 다시 올 수 있도록 Pinterest에 고정하세요!

(그래픽 이후에 더 많은 사용자 정의 글꼴 팁 및 문제 해결).

뉴스레터 블록 글꼴을 변경하는 방법

뉴스레터 블록을 사용하면 사람들이 귀하의 이메일 목록에 가입할 수 있습니다. 많은 사람들이 이를 위해 다른 플러그인을 사용합니다.

그러나 Squarespace 내에서 블록을 사용하는 경우 다음 코드를 사용하면 사용자 정의 글꼴을 추가할 수 있습니다.

 // Newsletter Form Title //.newsletter-form-header-title { font-family: YOURNAME !important; } // Newsletter Form Description //.newsletter-form-header-description p { font-family: YOURNAME !important; } // Newsletter Form Fields //.newsletter-form-field-element { font-family: YOURNAME !important; } // Newsletter Form Button //.newsletter-form-button { font-family: YOURNAME !important; } // Newsletter Form Footnote //.newsletter-form-footnote { font-family: YOURNAME !important; }

YOURNAME을 글꼴 이름으로 바꾸는 것을 잊지 마십시오.

블로그 게시물 글꼴을 변경하는 방법

글꼴로 할 수 있는 가장 인기 있는 작업 중 하나는 블로그 게시물에 글꼴을 사용하는 것입니다.

이 작업을 수행할 때 기사 페이지의 페이지 제목, 설명 및 게시물 제목을 고려해야 합니다.

당신은 아마 그것들이 모두 같기를 원할 것입니다.

 // Blog Page Post Title //.blog-title { font-family: YOURNAME !important; } // Blog Page Post Descriptions //.blog-excerpt p { font-family: YOURNAME !important; } // Blog Page Read More Link //.blog-more-link { font-family: YOURNAME !important; } // Blog Post Entry Titles // .blog-item-title h1.entry-title { font-family: YOURNAME !important; }

YOURNAME을 글꼴 이름으로 바꾸는 것을 잊지 마십시오.

인용 블록 글꼴을 변경하는 방법

마지막 예는 Quote Block 을 다른 글꼴로 변경하는 것입니다.

이것은 게시물의 인용문뿐만 아니라 고객 평가 또는 리뷰와 같은 항목에도 사용됩니다.

 // Quote Text //.sqs-block-quote blockquote { font-family: YOURNAME !important; } // Quote Source //.sqs-block-quote .source { font-family: YOURNAME !important; }

YOURNAME을 글꼴 이름으로 바꾸는 것을 잊지 마십시오.

내 Squarespace 이미지 크기 가이드를 좋아할 수도 있습니다.

사용자 정의 글꼴 문제

약간의 CSS를 다룰 수만 있다면 글꼴을 추가하는 것은 쉬운 일입니다. 그러나 보고되는 몇 가지 일반적인 오류가 있습니다.

사이트 스타일의 "지원되지 않는 글꼴" 메시지

때때로 사이트에 '지원되지 않는 글꼴' 메시지가 표시될 수 있습니다. 이것은 Adobe Font를 사용한 다음 Adobe에서 사용 중지할 때 발생합니다.

대부분의 경우 Squarespace는 이를 가장 가까운 대안으로 대체합니다. 그러나 그렇지 않은 경우 대체할 다른 글꼴을 업로드해야 할 수 있습니다.

로그인하면 글꼴이 다르게 보입니다.

때때로 사람들은 로그인할 때와 라이브 사이트를 볼 때 글꼴이 다르게 보인다는 것을 알 수 있습니다. 일반적으로 이것은 글꼴 판독기 및 사이트를 보는 방식 때문입니다.

이를 발견한 경우 Squarespace 지원에 문의하면 설정을 살펴보고 조정해야 할 사항을 확인할 수 있습니다.

글꼴을 특정 크기로 설정할 수 없습니다.

글꼴의 특정 크기를 설정하는 문제는 일반적으로 웹사이트의 백엔드와 관련이 있습니다. 사용 중인 Squarespace 버전 때문일 수 있습니다.

따라서 지원팀에 연락하여 잘못된 부분에 대한 도움을 받으십시오.

Squarespace에 사용자 정의 글꼴 추가

CSS를 터치하면 사용자 정의 글꼴 파일을 Squarespace에 빠르게 추가할 수 있습니다.

약간의 코드로 다른 위치에서 사용할 수 있으며 크기에서 문자 간격까지 모든 것을 조정할 수 있습니다.

스타일 편집기를 사용하면 기본 제공 글꼴 옵션 이상으로 웹 사이트를 쉽게 사용자 지정할 수 있습니다.

그렇다면 어떻게 사용자 정의 글꼴을 사용하여 웹 사이트를 더 똑똑하게 보이게 할 수 있습니까?