WordPress 웹 사이트에 사용자 정의 글꼴을 추가하는 방법을 배우고 싶습니까?
표준 글꼴을 사용하여 블로그를 지루하게 만드는 이유는 무엇입니까? 귀하의 블로그에서 귀하의 활기찬 성격과 다양한 사용자 정의 글꼴로 다루는 주제에 대해 이야기하게 하십시오. 사용자 정의 글꼴은 귀하의 블로그를 다른 사람들보다 더 좋아 보이게 하는 멋진 기능입니다.
현실을 직시하자; 우리 모두는 올바른 글꼴이 있는 블로그와 웹사이트를 좋아합니다. 웹사이트를 장식할 뿐만 아니라 사용자를 귀하의 콘텐츠로 끌어들이는 데 도움이 됩니다. 그러나 표준 WordPress 글꼴의 선택은 제한적이며 사용 중인 테마에 따라 다릅니다. 좋은 소식은 수동으로 또는 다음을 사용하여 추가할 수 있다는 것입니다. 워드 프레스 플러그인 전문.
그리고 여기서 두 가지 질문이 생깁니다.: 사용자 정의 글꼴을 얻을 수 있는 곳 워드프레스 및 사용자 정의 글꼴을 설치하는 방법 귀하의 웹 사이트에
의 알아 보자.
사용자 정의 글꼴을 사용해야 하는 이유는 무엇입니까?
Times New Roman과 Georgia가 웹사이트의 텍스트에 대한 유일한 서체로 간주되던 시대는 지났습니다. 지난 몇 년 동안 다음과 같은 글꼴의 출현으로 글꼴 공간이 완전히 변경되었습니다. 구글 글꼴 등.
오늘날 인터넷에는 수백 가지의 무료 글꼴, 정보 및 교육 보조 자료, 디자인 리소스가 있습니다. Adobe Illustrator, Photoshop 및 기타 클래식 앱과 달리 WordPress는 기본 글꼴을 완전히 제어할 수 없습니다. 특정 WordPress 테마만 사용자 정의 글꼴을 지원하고 사용하도록 선택합니다.
따라서 이 기사에서는 적절한 사용자 정의 글꼴을 찾고 WordPress 웹 사이트에서 사용하는 방법을 배웁니다.
사용자 정의 글꼴 사용의 중요성
글꼴, 단어 들여쓰기, 줄 간격, 문자 간격 또는 글꼴 채도를 변경하는 이유는 무엇입니까? 그러나 일부 연구에 따르면 타이포그래피는 독해력을 향상시킵니다.
많은 것은 글꼴의 구성에 달려 있습니다. 의식 및 무의식 수준에서 모든 사람은 디자인에 따라 웹 페이지의 내용을 평가합니다.
글꼴 디자인은 관심을 기울이지 않아도 독자에게 영향을 미칩니다.. 글꼴 디자인을 포기한다는 것은 개발 자체를 포기하는 것입니다! 독자의 기분은 그것에 달려 있습니다. 글꼴을 사용하면 읽기가 더 쉬워지거나 사용자가 페이지를 떠나게 됩니다.
모든 웹 브라우저에는 기본 글꼴 세트가 포함되어 있습니다. 즉, 페이지의 CSS에 글꼴이 지정되지 않은 경우 표준 버전이 사용됩니다. 기본 글꼴을 계속 사용할 수 있지만 사용자가 사용하기 어렵게 만듭니다. 이것이 사용자 정의 글꼴을 사용하는 것이 필수적인 이유입니다. WordPress 테마에 글꼴 변경 옵션이 없는 경우 도움이 될 수 있는 웹사이트와 도구가 많이 있습니다.
Google 글꼴 대안
많은 분들이 알고 계시는 Google 글꼴. 아름다운 글꼴을 찾을 수 있는 더 많은 웹사이트가 있습니다. 그들 중 일부는 개인용으로 무료입니다. 상업적 사용이 필요한 경우 라이선스가 필요합니다. Google 글꼴 및 Adobe Edge 글꼴은 무료입니다. 이것이 그들이 그렇게 독특하지 않은 이유입니다.
여기에 몇 가지 있습니다 글꼴을 찾기 위한 기타 리소스 무료 및 상업적 사용:
- TemplateMonster — TemplateMonster 웹사이트에서 웹 디자인에 필요한 모든 것을 찾을 수 있습니다. 저렴한 가격에 개인용 글꼴과 글꼴 팩도 많이 있습니다. 또한 선택을 돕기 위해 브로셔나 프레임에 있는 모든 글꼴을 제공합니다. 각 글꼴에는 상용 라이센스도 제공됩니다.
- myfonts 디렉터리 — MyFonts는 현재 세계에서 가장 다양한 글꼴을 제공합니다. 그러나 여기의 가격도 상위 세그먼트에 있습니다. 따라서 예산이 빠듯하다면 적합하지 않을 수 있습니다.
- 폰트스프링 — Fontspring은 상업적 용도로 참신한 글꼴을 판매합니다. 그러나 거의 모든 가정에서 1-2개의 무료 글꼴을 개인적인 용도로 사용할 수 있습니다. 또한 무료 글꼴이 있는 별도의 섹션이 있습니다. 컬렉션은 활기가 넘칩니다. 그러나 다운로드하기 전에 특정 글꼴에 대한 라이선스 정보를 주의 깊게 연구해야 합니다.
- 쿠폰폰트 — 또한 다양한 글꼴의 거대한 모음입니다. 하나를 선택하면 이에 대한 자세한 정보가 있는 페이지가 표시됩니다. 무료 글꼴이 많이 있으며 개별 섹션으로 나뉩니다. CufonFonts의 정렬 시스템은 매우 유연하고 편리합니다. 또한 Webfont 지원이 포함됩니다.
- Dafont — 액세스 가능한 3개의 무료 글꼴 모음. 대부분은 개인적인 용도로만 사용하도록 설계되었습니다. DaFont의 멋진 기능은 카테고리 시스템입니다. 만화, 비디오 게임, 빈티지 등의 스타일로 글꼴을 선택할 수 있습니다.
글꼴 선택은 모두 아름답기 때문에 매우 유혹적입니다. 그러나 많이 선택해서는 안됩니다. 사이트에서 두 개 이상의 글꼴을 사용하지 마십시오 편물. 그런 다음귀하의 웹사이트의 모습 일관성이 있을 것입니다. 글꼴을 선택한 후에는 사용할 각 스타일(보통, 굵게, 기울임꼴 등)에 대한 파일을 업로드해야 합니다.
웹사이트에 적합한 글꼴을 선택했으므로 이제 추가하는 방법을 알아보겠습니다.
WordPress에 사용자 정의 글꼴을 추가하는 방법
WordPress 웹 사이트에 글꼴을 추가하는 방법에는 여러 가지가 있습니다.
- 플러그인 : 이 경우 다른 워드 프레스 플러그인 프로세스를 용이하게 하기 위해 사용됩니다.
- 수동으로 : 이 방법을 사용하려면 사이트에서 다운로드한 글꼴을 다운로드하고 CSS 파일을 수정해야 합니다.
- 테마: 많은 인기 있는 테마에는 글꼴을 사용자 지정할 수 있는 기본 제공 옵션이 있습니다(참고 – 사용 중인 테마에 따라 프로세스가 달라지므로 이 옵션은 다루지 않습니다.
옵션 1 – 플러그인으로 WordPress 글꼴 변경
전역 변경 사항에 신경 쓰지 않으면 설치할 수 있습니다. 워드 프레스 플러그인 웹사이트의 글꼴이 변경됩니다.
사용자 정의 글꼴 플러그인의 기능
오픈 소스 소프트웨어는 커뮤니티의 관심을 끌 수 있는 이점이 있고 WordPress에도 그러한 이점이 있습니다. 여러 WordPress 플러그인을 사용하여 사용자 정의 글꼴을 추가할 수 있습니다. 플러그인이 너무 많을 때 적절한 플러그인을 선택하는 방법은 무엇입니까? 사용자 정의 글꼴 WordPress 플러그인의 기능은 무엇입니까?
고려해야 할 몇 가지 사항은 다음과 같습니다.
- 사용자 정의 글꼴을 사용하는 기능
- 여러 글꼴을 사용하는 기능
- 헤더 및 대상 구성 요소
- 보너스: 비주얼 편집기에서 글꼴 설정을 변경하는 기능
그게 다야. 목록의 첫 번째 특성은 매우 중요합니다. DaFont, Font Squirrel 등과 같은 웹사이트에서 여전히 글꼴을 다운로드할 수 있지만 WordPress에 업로드할 수 있어야 합니다.
사용자 정의 글꼴을 업로드할 수 있는 WordPress용 플러그인을 살펴보겠습니다.
1. 더 나은 굉장 글꼴
이 워드 프레스 플러그인을 사용하면 사용자가 최신 버전의 Better Font Awesome 글꼴과 CSS, 단축 코드 등. 또한이 WordPress 플러그인은 자동으로 업데이트됩니다.
정기 업데이트, 단축 코드 생성기, 다른 WordPress 플러그인과의 호환성 등의 기능으로 찾을 수 있습니다.
2. WordPress 용 Google 글꼴
이 WordPress 플러그인은 877 특수 글꼴로 구성되어있어 WordPress 웹 사이트의 모든 글꼴을 사용할 수 있습니다. 실시간 미리보기 덕분에 글꼴이 적용된 후 웹 사이트가 어떻게 보이는지 확인할 수 있습니다.
또한 원하는 조합을 찾으면 저장하고 프런트 엔드에서 편집 할 수 있습니다.
실시간 미리보기, 상당히 진보 된 SEO, 다국어 지원, 더 많은 870 + Google Fonts 지원, 손쉬운 업데이트 등.
3.글꼴 플러그인
글꼴 플러그인은 사용자가 Google 글꼴 및 Adobe 글꼴 라이브러리에 액세스할 수 있는 무료 WordPress 플러그인입니다. 이 WordPress 플러그인을 사용하면 1000개 이상의 Google 및 Adobe 글꼴 중에서 선택하고, 웹사이트에서 여러 글꼴을 사용하고, WordPress 사용자 정의 도구에서 플러그인의 실시간 미리보기 기능으로 다양한 옵션을 테스트할 수 있습니다.
글꼴 크기, 문자 간격 및 줄 높이와 같은 웹사이트 타이포그래피를 사용자 정의하는 더 많은 방법을 위해 프리미엄 버전으로 업그레이드할 수 있습니다. 글꼴 플러그인 프로.다운로드 | 데모 | 웹 호스팅
4. 쉬운 Google 글꼴
Easy Google Fonts는 다음 중 하나입니다. 최고의 워드 프레스 플러그인 웹사이트의 타이포그래피를 사용자 정의합니다. 글꼴 플러그인과 마찬가지로 수백 개의 Google 글꼴 중에서 선택하고 웹사이트에 추가하기 전에 사용자 정의 프로그램에서 미리 볼 수 있습니다.
더 적은 수의 Google 글꼴에 대한 액세스를 제공하지만 관리 영역에서 사용자 정의 글꼴 컨트롤 및 규칙을 생성할 수 있다는 점에서 독특합니다. 이 규칙은 WordPress 사용자 정의 프로그램에 즉시 표시됩니다.
옵션 2 – WordPress 사용자 정의 글꼴 수동 설치
@font-face 지시어를 사용하여 하나 이상의 글꼴을 웹사이트에 연결할 수 있습니다. 그러나 이 방법에는 장단점이 있습니다.
혜택:
- CSS 덕분에 ttf, otf, woff, svg와 같은 모든 형식의 글꼴을 연결할 수 있습니다.
- 글꼴 파일은 서버에 있으며 타사 서비스에 의존하지 않습니다.
단점 :
- 각 스타일에 맞는 글꼴 연결을 위해서는 별도의 코드를 등록해야 합니다.
- CSS를 모르면 쉽게 혼동될 수 있습니다.
하지만 당신이 할 수 있다면 그것은 진짜 문제가 아닙니다 완성된 코드를 복사하기만 하면 값을 지정해야 하는 위치.
레마르크 : 시작하기 전에 반드시 자식 테마 만들기 당신의 웹사이트를 위해. 이 방법을 사용하면 기본 테마를 그대로 두고 자식 테마를 모두 변경할 수 있으므로 나중에 필요할 때 쉽게 업데이트할 수 있습니다.
1단계: "글꼴" 폴더 만들기
하위 테마에서 다음 아래에 새 "글꼴" 폴더를 만듭니다. wp-content/themes/your-child-theme/fonts
2단계. 다운로드한 글꼴 파일을 웹사이트에 업로드
이것은 호스팅 제어판이나 FTP를 통해 수행할 수 있습니다.
새로 추가된 글꼴 폴더에 모든 글꼴 파일을 추가합니다. wp-content/themes/ 하위 테마에서 다음 아래에 새 "글꼴" 폴더를 만듭니다. wp-content/themes/your-child-theme/fonts 당신이 만든.
3단계. 자식 테마 스타일시트를 통해 글꼴 가져오기
파일을 엽니 다 style.css CSS 파일의 시작 부분(하위 테마 주석 뒤)에 다음 코드를 추가합니다.
@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont.eot');
src: url('fonts/WebFont.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont.woff') format('woff'),
url('fonts/WebFont.ttf') format('truetype'),
url('fonts/WebFont.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: normal;
}어디에 마이웹폰트 는 글꼴의 이름이고 src 속성의 값(따옴표로 묶인 괄호 안의 데이터)은 해당 위치(상대 링크)입니다. 각 스타일을 별도로 지정해야 합니다.
먼저 normal 스타일을 연결하므로 font-weight 및 font-style 속성을 normal로 설정합니다.
4단계. 추가할 때 기울임꼴, 다음을 작성하십시오.
@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic.eot');
src: url('fonts/WebFont-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic.woff') format('woff'),
url('fonts/WebFont-Italic.ttf') format('truetype'),
url('fonts/WebFont-Italic.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: italic;
}모든 것이 같을 때 글꼴 스타일 속성을 기울임꼴로 첨부하는 유일한 사람입니다.
5단계. 굵은 글꼴을 추가하려면 다음 코드를 추가합니다.
@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Bold.eot');
src: url('fonts/WebFont-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Bold.woff') format('woff'),
url('fonts/WebFont-Bold.ttf') format('truetype'),
url('fonts/WebFont-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: normal;
}font-weight 속성을 굵게 설정한 곳입니다.
각 스타일에 대한 글꼴 파일의 정확한 위치를 지정하는 것을 잊지 마십시오.
6단계. 굵은 기울임꼴을 연결하려면 다음을 입력합니다.
@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic-Bold.eot');
src: url('fonts/WebFont-Italic-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic-Bold.woff') format('woff'),
url('fonts/WebFont-Italic-Bold.ttf') format('truetype'),
url('fonts/WebFont-Italic-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: italic;
}그게 다야 이제 네 가지 글꼴 스타일을 웹사이트에 연결했습니다.
그러나 한 가지 주의할 점이 있습니다. 이 글꼴 연결은 Internet Explorer 8에서 올바르게 표시되지 않습니다. 아직 IE8을 사용하는 사람이 거의 없다는 것이 위안이 됩니다.
다른 추천 자료
또한 귀하의 웹 사이트 및 블로그에 대한 이해와 통제를 위해 아래 자료를 참조하십시오.
- 웹사이트를 위한 10가지 WordPress 아코디언 플러그인
- WordPress에 여러 열을 추가하는 방법
- 일부 플러그인은 블로그에 Google 서비스를 통합하는
- 알림을 표시하는 5 WordPress 플러그인
- 서로 다른 배경을 사용하여 워드 프레스
결론
사용자가 웹사이트를 방문할 때 가장 먼저 보는 것은 무엇입니까? 바로, 그 디자인! 대부분의 디자인은 아름다운 글꼴의 적절한 사용에 의존합니다. 따라서 웹 사이트 글꼴 디자인을 관리해야 합니다. 코드를 추가하거나 위에서 언급한 플러그인 중 하나를 사용하여 새 글꼴 스타일을 포함하세요. 당신이 그것을 선택하는 방법은 당신에게 달려 있습니다.
같은 웹사이트에서 두 개 이상의 글꼴을 사용하지 않도록 합니다. 웹 사이트에 사용자 정의 글꼴을 더 많이 추가할수록 웹 사이트 속도가 더 많이 떨어집니다.
WordPress 웹 사이트에 사용자 정의 글꼴을 추가하는 방법을 보여주는 이 기사의 내용은 여기까지입니다. 우리는 당신을 시도하도록 초대합니다. 우려 사항이나 제안 사항이 있으면 commentaires.
그러나 귀하는 우리와 상담 할 수 있습니다. 능숙, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
욕실 교환, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
