개인화된 서체 가져오기

Webflow 사이트에서 사용하려면 사이트 설정에서 사용자 정의 글꼴을 업로드하세요.

다음에서 사이트에 직접 추가 서체를 포함할 수 있는 옵션이 있습니다. 타이포그래피 디자인 패널의 드롭다운입니다. 선택하다 서체 가져오기 그리고 당신은 다음으로 연결될 것입니다 사이트 설정 > 타이포그래피 부분. 여기에서 고유한 맞춤 서체를 사이트에 업로드할 수 있습니다.

사용하려는 서체에 Adobe 서체(Typekit) 또는 Google 서체를 통해 액세스할 수 있는 경우 통합을 통해 통합할 수 있습니다. 사이트 설정 > 타이포그래피 부분. Adobe 서체 통합에 대해 자세히 알아보세요. 

알아두어야 할 가치: 개인화된 서체를 가져오기 위해 유료 Site 또는 Workspace 요금제가 필요하지 않습니다.

이 가이드 전체에서 다음 내용을 확인할 수 있습니다.

  1. 개인화된 서체를 가져오는 방법
  2. 적절한 서체 형식을 선택하는 방법
  3. 설치된 서체를 수정하는 방법
  4. 대체 서체 및 표시 구성을 지정하는 방법
  5. 디자이너에서 서체를 평가하는 방법
  6. 사이트에서 개인화된 서체를 제거하는 방법

개인화된 서체를 가져오는 방법

귀하의 사이트에서 개인화된 서체를 활용하려면 사이트 설정 > 타이포그래피 섹션에서 아래로 스크롤하여 맞춤형 서체을 클릭하고 거기에 서체 파일을 업로드하세요.

사이트 설정의 글꼴 탭에 있는 사용자 정의 글꼴 섹션을 사용하면 사이트에 사용자 정의 글꼴을 업로드할 수 있습니다.

중대한: 서체의 라이센스 계약을 검토하고 업로드하기 전에 사이트에서 서체를 사용할 권한이 있는지 확인하십시오. 서체 라이선스 및 사용에 대해 자세히 알아보세요..

무료 서체를 찾고 계십니까? 탐구하다: 무료(거의 무료) 서체를 찾을 수 있는 9곳

적절한 서체 형식을 선택하는 방법

다양한 서체 파일 형식을 Webflow 사이트에 업로드할 수 있습니다. 

알아두어야 할 가치: 서체 파일당 최대 4MB의 파일 크기를 업로드할 수 있습니다.

대부분의 브라우저에서 호환 가능

몇몇 브라우저에서 지원됨

알아두어야 할 가치: 모든 파일 형식을 업로드할 필요는 없습니다. 그럼에도 불구하고 최대 브라우저 지원을 포함하기 위해 여러 가지 형식을 업로드할 수 있습니다. WOFF는 포괄적인 브라우저 호환성과 합리적인 파일 크기를 갖춘 견고한 형식입니다. WOFF 또는 WOFF2 버전의 서체 파일이 부족한 경우 온라인에서 사용할 수 있는 서체 변환기를 활용할 수 있습니다.

중대한: Webflow는 TTF, OTF, WOFF 및 WOFF2 형식의 가변 서체를 수용합니다. 그러나 Webflow는 현재 EOT 및 SVG 형식의 가변 서체를 지원하지 않습니다.

설치된 서체를 수정하는 방법

업로드 중인 서체 파일을 게시하면 서체 유형 이름, 서체 두께 및 서체 스타일을 변경할 수 있습니다.

주요 접근 방식: 다양한 버전의 서체를 업로드하고 고유한 서체를 지정할 수 있습니다. 서체 무게 그리고 스타일 각 버전에 대해 또는 서체 계열 범위의 모든 변형(예: 두께, 너비 등)을 포함하는 가변 서체를 가져올 수 있습니다. 다양한 버전의 서체를 업로드하는 경우 동일한 서체를 사용해야 합니다. 서체 계열 동일한 서체의 모든 버전에 대해. 이 작업을 수행하면 디자이너에서 서체 모음이 올바르게 그룹화됩니다.

서체 계열 이름이 정확하게 일치하면 다음을 수행할 수 있습니다. 업로드 각 서체 파일을 사이트에 추가하세요. 디자이너에서 사이트를 다시 열면 업로드된 파일이 디자이너에 표시됩니다.

사이트 설정 > 글꼴 탭 > 사용자 정의 글꼴에서 사용자 정의 글꼴 옆에 "글꼴 파일 업로드" 버튼이 강조 표시되어 있습니다.

당신은 항상 할 수 있습니다 수정하다 나만의 서체 설정. 당신은 또한 수 삭제 업로드된 서체.

설치된 사용자 정의 글꼴 옆에 "편집" 및 "삭제" 버튼이 강조 표시됩니다.

대체 서체 및 표시 설정을 정의하는 방법

대체 서체는 브라우저와 운영 체제 간의 포괄적인 호환성을 보장합니다. 사이트 방문자의 브라우저가 개인화된 서체를 로드하지 못하면 대체 서체로 전환됩니다. 업로드하는 모든 서체 모음에 대해 대체 서체가 자동으로 생성됩니다.

당신은 할 수 있습니다 바꾸다 모든 서체 계열에 대한 대체 서체를 선택하고 사용 가능한 서체 배열에서 되돌릴 서체를 선택합니다.

가능하다 변화 그만큼 글꼴 표시 브라우저의 저장된 데이터에 따라 글꼴이 로드되는 방식을 결정하는 기본 설정입니다.

Mona sans라는 설치된 사용자 정의 글꼴의 "디스플레이" 설정이 교체로 설정되어 있습니다. 
내부자 팁: 글꼴 표시 기본 설정을 교환하도록 설정하면 보이지 않는 텍스트의 깜박임 시스템 글꼴을 사용하여 페이지 로딩 중.

Designer 인터페이스에서 글꼴을 확인하는 방법

Designer 내에서 사용자 정의 글꼴 및 글꼴 변형에 완전히 액세스할 수 있습니다. 필요한 글꼴을 탐색할 수 있습니다. 모양 패널 > 조판 > 폰트. 그만큼 폰트 선택하면 소스에 따라 글꼴을 분류하고(예: Google 글꼴, 웹 글꼴, 사용자 정의 글꼴 등) 각 소스 내에서 알파벳순으로 정렬합니다. 사이트에 업로드된 모든 글꼴은 아래에 나열됩니다. 맞춤 글꼴.

텍스트 구성 요소, 상위 요소 또는 HTML 태그에 사용자 정의 글꼴을 적용하여 모든 단락이나 모든 H1에 영향을 줄 수 있는 옵션이 있습니다.

사이트에서 사용자 정의 글꼴을 제거하는 프로세스

사이트에서 사용자 정의 글꼴을 제거하려면 해당 사용자 정의 글꼴이 있는 모든 항목을 찾아서 사이트에서 삭제하고 궁극적으로 사용자 정의 글꼴을 삭제해야 합니다. 사이트 설정 > 글꼴 탭 > 맞춤 글꼴

메모: 간단히 사용자 정의 글꼴을 삭제하면 사이트 설정 > 글꼴 탭은 사이트에서 사용자 정의 글꼴을 완전히 제거하지 않습니다. 사이트에서 사용자 정의 글꼴의 모든 인스턴스를 삭제할 때까지 사용자 정의 글꼴은 사이트에 게시된 CSS에 계속 존재합니다.

사이트에서 사용자 정의 글꼴의 모든 인스턴스를 찾으려면 외모관리자 그리고 글꼴 이름을 검색해 보세요. 이 작업을 수행하면 해당 사용자 정의 글꼴을 사용하여 사이트의 모든 클래스 및 HTML 태그 목록이 생성됩니다. "를 클릭하면 됩니다.목록” 기호를 클릭하면 해당 클래스를 활용하는 요소 및 구성 요소 목록을 볼 수 있습니다. 

스타일 관리자가 사용자 정의 글꼴 "Inter"를 검색하면 Body(모든 페이지) 태그와 두 클래스가 해당 글꼴을 사용하는 것으로 표시됩니다. 목록 아이콘이 강조 표시되어 현재 페이지와 다른 페이지에 영향을 받는 요소를 표시합니다.

사용자 정의 글꼴을 사용하여 클래스 및/또는 HTML 태그를 식별한 후에는 해당 글꼴을 사용하는 요소를 지우고 사용하지 않는 클래스를 외모관리자, 또는 해당 클래스 및/또는 HTML 태그에서 사용되는 글꼴을 수정합니다. 모양 패널 > 조판 > 폰트

사이트에서 사용자 정의 글꼴을 모두 지운 후 사이트 설정에서 사용자 정의 글꼴을 제거할 수 있습니다. 

  1. 로 이동 사이트 설정 > 글꼴 탭 > 맞춤 글꼴 
  2. 선택하다 삭제 사이트에서 제거하려는 사용자 정의 글꼴 옆
  3. 변경 사항을 적용하려면 사이트를 다시 게시하세요. 

자세한 내용은: 고급 웹 타이포그래피

이완 막
Ewan Mak의 최신 게시물 (모두 보기)