웹 사이트에서 사용자 지정 글꼴 사용

반응형

구글의 팀은 당신의 웹사이트에서 무료로 사용할 수 있는 놀라운 글꼴 라이브러리를 제공했습니다. 이러한 글꼴을 통해 개발자들은 독창성뿐만 아니라 창의성을 발휘할 수 있다. 게다가, 구글은 또한 당신이 직접 그것들을 호스팅하지 않고도 당신의 사이트에 이러한 글꼴들 중 어떤 것이라도 로드할 수 있게 해주는 서비스를 제공했습니다. 우리들 중 꽤 많은 사람들이 지금 이 순간 사용하고 있을 것이다.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Robot">

하지만 여러분만을 위해 만들어진 맞춤 글꼴이 있거나, 사업이나 다른 이유로 구글이 제공하는 서비스를 이용할 수 없다면 어떨까요? 당신의 사이트에서 그 글꼴을 어떻게 사용할 수 있나요?

이 문서에서는 사용자 지정 글꼴을 사용하거나 Google 글꼴 API를 사용하지 않고 Google에서 제공하는 글꼴을 사용하는 방법을 보여 드리겠습니다.

 

글꼴 유형

몇 가지 글꼴 유형이 있지만 일부 브라우저 버전이 모든 글꼴 유형을 지원하는 것은 아닙니다. 따라서 어떤 브라우저가 어떤 유형을 지원하고 어떤 버전을 지원하기 시작했는지 이해하려면 아래 표를 확인하십시오.

• w3cl에서 제공하는 테이블 데이터글꼴 다운로드Google에서 글꼴을 가져오려면 https://fonts.google.com으로 이동하여 원하는 글꼴을 선택하고 패밀리 다운로드를 클릭합니다.글꼴의 모든 변형(중간, 굵게, 기울임꼴 등)이 포함된 ZIP 파일을 다운로드합니다. 파일의 압축을 풀면 TTF 형식이 다운로드됩니다. 그대로 사용하거나 WOFF2로 변환할 수 있습니다. 생산을 위해 변환하는 것이 좋습니다.글꼴을 WOFF2로 변환하려면 클라우드 변환과 같은 서비스를 사용할 수 있습니다.
  
  웹 사이트에서 글꼴 사용변환된 글꼴을 웹 사이트 폴더로 이동합니다.
  
  @font-face 규칙에서는 글꼴 파일의 이름과 URL을 지정해야 합니다. 규칙이 클라이언트의 브라우저에 로드되면 지정된 위치에서 글꼴 파일을 다운로드하여 로드합니다.
• @font-face 규칙을
• 다음으로 @font-face 규칙을 추가합니다. @font-face 규칙을 사용하면 CSS 전체에서 사용할 수 있는 새 글꼴 유형을 정의할 수 있습니다.
•  
• 글꼴을 WOFF2로 변환하면 웹 사이트에 추가할 수 있습니다.
• TTF 파일을 업로드하고 변환을 클릭한 다음 다운로드를 클릭합니다.
•  
• 글꼴 변환
• 
•  
• W3C(World Wide Web Consortium)는 WOFF(Web Open Font Format)를 사용할 것을 권장합니다. WOFF는 압축 기능이 있는 TTF(TrueType 글꼴) 또는 OTF(OpenType 글꼴)입니다. WOFF 2.0은 더 나은 압축 기능을 갖춘 최신 버전의 WOFF이다.