해시 사용자 정의 글꼴 업로더 플러그인을 사용하여 사용자 정의 글꼴 업로드

웹 사이트에서 똑같은 글꼴을 사용하는 데 지쳤으며 웹 사이트를 다르게 만들고 싶습니까? 코딩 전문가가 아니더라도 걱정하지 마세요! WordPress 테마에 좋아하는 글꼴을 추가하는 쉬운 방법을 보여주는 간단한 가이드가 있습니다. 이 문서에서는 사용자 정의 글꼴을 업로드하는 과정을 한 번에 한 단계씩 안내하여 웹 사이트에 고유한 스타일을 간단하게 부여할 수 있습니다.

플러그인 설치

글꼴 사용자 정의 및 업로드를 시작하려면 Hash Custom Font Uploader 라는 플러그인을 설치해야 합니다.

*참고: 이 플러그인은 HashThemes 테마와만 호환됩니다*

해시 사용자 정의 글꼴 업로더 설치

해시 글꼴 업로더를 설치하려면 다음 지침을 따르십시오.

• 플러그인 > 새 플러그인 추가 > 플러그인 업로드 로 이동하세요.
• 플러그인 업로드를 클릭하고 PC에서 .zip 파일을 선택하세요.
• .zip 파일을 업로드한 후 지금 설치 를 클릭하세요.
• 그런 다음 플러그인을 활성화하십시오 .
• 플러그인이 Hash Custom Font Uploader로 나타나는 것을 볼 수 있습니다.

플러그인을 설치한 후에는 사용자 정의 글꼴을 사용하여 글꼴 업로드 프로세스를 시작할 수 있습니다.

한 번에 한 단계씩 프로세스를 안내해 드리겠습니다.

글꼴 선택

HashThemes에서 제공하는 테마는 선택할 수 있는 다양한 Google 글꼴을 제공합니다. 800개 이상의 Google 글꼴이 있습니다.

그러나 뭔가 독특한 것을 찾고 있다면 여러 글꼴 디자이너가 만든 훨씬 더 다양한 선택 사항을 제공하고 다양한 웹 사이트에서 무료 또는 유료로 사용할 수 있는 수많은 글꼴 웹 사이트를 언제든지 탐색할 수 있습니다.

Font Squirrel은 그러한 웹사이트의 대표적인 예입니다. 이 플랫폼은 무료로 글꼴을 다운로드할 수 있는 자유를 제공할 뿐만 아니라 파일을 글꼴 업로드에 필요한 형식으로 변환하는 프로세스를 간소화합니다.

또한 최소한의 비용으로 즉시 사용할 수 있는 다양한 고품질 글꼴을 구매할 수 있다는 점도 언급할 가치가 있습니다.

이 튜토리얼에서는 Font Squirrel을 사용하여 글꼴 업로드 프로세스를 단순화하는 방법을 보여줍니다.

Hash Custom Font Uploader에서 사용하려면 두 가지 글꼴 파일 형식(WOFF 및 WOFF2)이 필요합니다. 글꼴의 변형과 파일이 WOFF 및 WOFF2 형식으로 변환되는 이유에 대해 자세히 알고 싶다면 함께 읽어보세요. 사용자 정의 글꼴 튜토리얼 업로드를 바로 시작하려면 여기를 클릭하세요.

다양한 파일 형식 이해

튜토리얼을 시작하기 전에 글꼴이 사용할 수 있는 몇 가지 일반적인 파일 형식에 대해 알아봅시다.

트루타입 글꼴(.ttf): .ttf 글꼴 형식은 데스크탑 및 웹 타이포그래피에 널리 사용되는 글꼴 형식입니다. 이 파일 형식은 Windows 및 macOS 시스템과 모두 호환됩니다.

OpenType 글꼴(.otf): Open Type 형식은 True Type 형식의 확장입니다. 이 형식은 추가 인쇄 기능을 허용하며 Windows 및 macOS와 모두 호환됩니다.

웹 개방형 글꼴 형식(.woff): 이 유형의 형식은 웹 사용을 위해 특별히 설계되었습니다. 이는 우수한 압축 및 브라우저 호환성을 제공합니다.

웹 오픈 글꼴 형식 2(.woff2): 이 파일 형식은 웹 오픈 글꼴 형식의 향상된 버전으로, 웹 글꼴에 대한 뛰어난 압축 및 성능을 제공합니다.

PostScript 유형 1 글꼴(.pfb): PostScript 유형의 글꼴 형식은 PostScript 인쇄 업계에서 주로 사용되는 이전 버전의 글꼴 형식입니다.

SVG 글꼴(.svg): XML 기반 SVG 글꼴은 웹 아이콘 및 특수 디자인에 자주 사용됩니다.

비트맵 글꼴(.fon): 픽셀 격자로 표현되는 글꼴로 저해상도 디스플레이에 적합합니다.

다양한 목적으로 사용되는 글꼴 형식 중 일부입니다. 이러한 형식에 익숙해지는 이유는 추가적인 이점을 위해 일부 파일을 변환해야 하기 때문입니다.

가장 일반적으로 사용되는 파일 형식은 데스크톱 및 웹 타이포그래피에 사용되는 TTF(True Type Font)와 OTF(Open Type Font)입니다.

그러나 2021년 현재 웹 사용에 가장 많이 사용되는 글꼴 형식은 WOFF(Web Open Font Format)와 WOFF2(Web Open Font Format 2)였습니다.

*참고: 시간이 지남에 따라 글꼴의 인기가 높아질 수 있으며 새로운 기술이 기존 기술을 대체할 수 있다는 점을 아는 것이 중요합니다.*

파일을 .woff 및 .woff2 형식으로 변경해야 하는 이유는 무엇입니까?

TTF 및 OTF 파일은 웹에 직접 업로드할 수 있지만 .woff 및 .woff2 파일 형식으로 변환하면 다음과 같은 몇 가지 이점이 있습니다.

1. 압축:

TTF 및 OTF 파일을 WOFF 및 WOFF2 형식으로 변환하는 가장 큰 이유는 크기가 압축된다는 것입니다. 파일 크기가 작을수록 웹페이지 로딩 시간이 빨라집니다. 이는 사용자 경험과 SEO 순위를 향상시키는 데에도 중요합니다.

2. 웹 최적화:

WOFF 및 WOFF2 형식은 웹에 적합하며 사용자가 특정 웹 페이지에 필요한 문자와 글리프만 포함하여 파일 크기를 더욱 줄일 수 있는 글꼴 하위 설정 기능을 포함하여 널리 사용됩니다.

3. 브라우저 호환성:

최신 웹 브라우저는 WOFF 및 WOFF2 형식을 광범위하게 지원하여 다양한 플랫폼과 장치에서 안정적인 글꼴 렌더링을 보장합니다. TTF 및 OTF 파일은 다양한 수준의 호환성 및 지원을 가질 수 있습니다.

4. 라이센스:

많은 글꼴 라이센스는 웹에서 WOFF 및 WOFF2 형식의 사용을 허용하는 경향이 있지만 TTF 및 OTF 파일에는 더 많은 제한이 있을 수 있습니다. 글꼴을 WOFF/WOFF2 형식으로 변환하면 글꼴 라이센스 요구 사항을 준수할 수 있습니다.

5. 성능:

WOFF 및 WOFF2 글꼴 형식은 일반적으로 최적화되어 있습니다. 따라서 웹 환경에서 더 나은 성능을 발휘하여 더 부드럽고 빠른 텍스트 렌더링이 가능합니다.

TTF 및 OTF 파일을 WOFF/WOFF2 파일로 변환하기 위한 기본 필수 사항입니다. 다음으로 글꼴 업로더 프로세스를 안내해 드리겠습니다.

"Font Squirre L" 웹사이트의 글꼴 선택

이제 글꼴 선택 프로세스를 시작하고 더 자세히 살펴보겠습니다.

• 검색창에 "Sinkin Sans"를 입력하면 다양한 변형과 ​​함께 글꼴 미리보기가 표시됩니다.
• 다음으로 Sinkin Sans 글꼴용 OTF 파일을 다운로드하세요.

이 튜토리얼에서는 "Sinkin Sans" 글꼴을 선택했습니다 . 원하는 글꼴을 선택하여 사용할 수 있습니다. 또한 앞서 언급했듯이 글꼴은 다양한 형식이 될 수 있습니다. 여기서 Sinkin Sans 글꼴 파일은 OTF 형식입니다.

• .zip 파일을 지정된 폴더에 추출합니다.

웹폰트 생성기

Hash Custom Font Uploader에서 사용되는 글꼴은 WOFF 및 WOFF2 파일 형식이어야 합니다. 따라서 다운로드한 글꼴이 WOFF 및 WOFF2 파일 형식인 경우 아래 단계를 건너뛰고 Hash Custom Font Uploader로 직접 진행할 수 있습니다. 그러나 다운로드한 글꼴이 WOFF 및 WOFF2 형식이 아닌 경우 글꼴 생성기/변환기를 사용하여 WOFF 및 WOFF2 글꼴 파일을 생성해야 합니다.

• Font Squirrel 웹사이트의 Webfont Generator 온라인 애플리케이션을 사용하겠습니다.
• 아래 스크린샷의 3번이 가리키는 웹폰트 생성기를 클릭하세요.

• 키트를 얻으려면 글꼴 업로드 버튼을 클릭하고 다운로드/추출된 글꼴 파일을 업로드하세요.

• 이 예에서는 "Sinkin Sans Regular"를 선택합니다.
• 선택을 마친 후 열기를 클릭하기만 하면 됩니다.
• 키트를 다운로드하세요 .

• 다운로드한 zip을 추출합니다. 웹폰트 생성기가 해시 사용자 정의 글꼴 업로더 플러그인에 필요한 .WOFF 및 .WOFF2 파일을 생성한 것을 볼 수 있습니다.

해시 사용자 정의 글꼴 업로더 플러그인에 사용자 정의 글꼴 업로드

Sinkin Sans 글꼴은 귀하의 웹 사이트에서 사용할 준비가 거의 완료되었으며 몇 단계만 거치면 됩니다. 아래 지침을 따르십시오.

• 해시 맞춤 글꼴 업로더로 이동
• 그런 다음 지시에 따라 .woff2 및 .woff 글꼴 파일을 업로드하고 글꼴 두께를 Normal 400 으로 선택하십시오.
• 다음 단계에서는 필요할 때 쉽게 찾을 수 있도록 글꼴에 이름을 지정합니다. 이 경우에는 글꼴이 Sinkin Sans이므로 그에 맞게 이름을 지정했습니다.
• "설정 저장"을 클릭하여 저장하세요.
• 저장되면 하단에 Sinkin Sans 글꼴이 어떻게 나타나는지 확인할 수 있습니다. 이는 또한 글꼴이 작동 중이며 지금 사용할 수 있음을 나타냅니다.

사용자 정의 글꼴에 대한 변형 업로드

글꼴은 다양한 스타일과 모양을 가질 수 있습니다. 여기서는 동일한 글꼴에 다른 글꼴 스타일을 추가하는 방법을 알아봅니다.

위에서 선택한 글꼴(Sinkin Sans)에는 가늘게, 가벼움, 일반, 중간, 세미 볼드, 볼드, 검정색 및 이탤릭체와 같은 다양한 변형이 있습니다.

여기서는 Sinkin Sans의 Semi Bold 스타일을 선택하겠습니다. 그리고 "Font Squirrel" 대신 다른 글꼴 변환기 웹사이트를 사용할 예정입니다.

참고: 인터넷에는 다른 변환기도 많이 있습니다. 여기서는 CloudConvert를 사용하고 있습니다.

• 시작하려면 파일을 .woff2 및 .woff 파일로 변환하는 OTF 변환기로 이동하세요.
• 여기에서 파일을 쉽게 변환하는 데 도움이 되는 것을 볼 수 있습니다. 변환하려는 파일을 선택하십시오. 여기서는 Sinkin Sans semibold .otf 파일을 .woff 및 .woff2로 변환하겠습니다.
• 변환할 파일을 선택한 후 데스크탑에서 " 파일 선택"을 선택하세요.
• 파일을 변환하면 시간이 좀 걸립니다.
• 변환이 완료되면 필요한 파일을 PC에 저장하십시오.

• 해시 맞춤 글꼴 업로더로 이동
• 그리고 동일한 글꼴에 가중치를 추가하려면 "새 글꼴 추가"를 클릭하는 대신 "글꼴 가중치 추가"를 클릭하세요.

• 그런 다음 지침에 따라 .woff2 및 .woff 글꼴 파일을 업로드하고 글꼴 두께를 SemiBold 600 으로 선택하십시오.
• “설정 저장” 버튼을 클릭하여 저장하세요.
• 텍스트가 어떻게 나타나는지 볼 수 있습니다. 위의 텍스트보다 텍스트가 더 굵습니다.
• 마찬가지로, " 글꼴 두께 추가 "를 클릭하여 더 많은 글꼴 변형을 추가하고 " 새 글꼴 추가 "를 클릭하여 다른 글꼴을 추가할 수 있습니다.

웹사이트 글꼴 사용

홈페이지에 업로드된 글꼴을 사용해보자.

• 모양> 사용자 정의 로 이동하십시오.
• 추가 사용자 정의를 위해 타이포그래피 설정 내에서 '본문' 옵션을 찾으세요.”
• "글꼴군" 옵션에서 'Sinkin Sans'를 검색하여 선택하세요.
• 글꼴을 선택하면 " 글꼴 두께/스타일 "에 이전에 추가한 변형(보통 400 및 세미 볼드)이 표시됩니다.
• 적절한 변형을 선택한 다음 오른쪽 사용자 정의 창에서 변경 사항을 실시간으로 확인하세요.
• 원하는 대로 글꼴 크기, 글자 간격, 줄 높이를 조정할 수 있습니다.
• 만족스러우면 '게시'를 클릭하여 변경 사항을 적용하면 웹사이트가 새로운 모습으로 바뀔 것입니다.

사용자 정의 글꼴을 업로드하기 위해 해야 할 일은 이것이 전부입니다. 혼란스러운 점이 있으면 언제든지 저희에게 연락하실 수 있습니다.