이 튜토리얼에서,나는 어떻게 당신의 블로거 블로그에 구글 웹 글꼴을 업로드하는 방법을 보여 드리겠습니다. 이 작업을 수행하는 몇 가지 방법이 있습니다,그러나 이것은 내가 그것을 할 방법입니다.
이 튜토리얼은 몇 가지 지식이있는 사람들을 위해 가장 적합합니다. 이 자습서에서는 블로거의”간단한”템플릿을 사용하고 있습니다.
다음은 우리의 레몬 마카롱 템플릿에 설치된 사용자 정의 구글 웹 글꼴의 예입니다.
1 단계
시작하기 전에 변경하기 전에 현재 템플릿을 백업하는 것이 좋습니다(뭔가 잘못 될 경우를 대비하여).
템플리트>백업/복원(오른쪽 상단에 위치)>전체 템플릿 다운로드로 이동하여 대시보드에서 이 작업을 수행할 수 있습니다.
2 단계
템플릿을 백업한 후 편집을 클릭합니다.
3 단계
이 페이지를 열어두면 새 탭이나 창을 열고 구글 웹 글꼴 웹 사이트로 향합니다. 사용하려는 글꼴을 검색하고 빠른 사용을 선택합니다.
나는’랍스터 두’글꼴을 사용하기로 결정했습니다.
4 단계
섹션 1:원하는 스타일을 선택하고 글꼴에 사용할 수있는 스타일을 선택하십시오(여러 스타일을 선택할 수 있음). 너무 많은 스타일을 선택하면 블로그 속도가 느려질 수 있습니다. 아래에서 볼 수 있듯이 일반 400 을 선택했습니다.
섹션 3:이 코드를 웹 사이트에 추가하고@가져오기 탭을 클릭합니다.
5 단계
@가져오기 상자에 정보를 복사합니다.
이제 이 페이지를 열어두고 블로그로 돌아갑니다. 우리는 당신의 템플릿에 글꼴 가져 오기 코드를 붙여 넣을 것입니다.
템플릿 편집기의 시작 부분(일반적으로 13 또는 14 행에 위치)에 있는 팔로우 텍스트를 찾습니다.:
<b:skin>...</b:skin>
확장되면,당신은 구글 웹 글꼴 웹 사이트,다음 텍스트@가져 오기 상자에서 복사 한 정보를 붙여 넣습니다:
/* Variable definitions
다음과 같이 표시됩니다:
클릭 템플릿 저장. 귀하의 글꼴은 이제 수입되었습니다! 지금 당신은 당신이 당신의 템플릿에 표시 할 글꼴 패밀리를 배치 할 수 있습니다.
6 단계
빨리 새로 가져온 글꼴을 사용하는 방법을 보여 드리겠습니다. 이 예제에서는 내 게시물 제목에 대한 글꼴을 사용합니다. 에 대한 검색:
h3.post-title, .comments h4
다음 줄을 제거하십시오:
font: $(post.title.font);
그리고 섹션 4 에 나와있는 텍스트로 대체:구글 웹 글꼴 웹 사이트에 당신의 고사양 폰트에 글꼴을 통합 할 수 있습니다.
font-family: 'Lobster Two', cursive;
글꼴 패밀리 정보를 붙여 넣으면 다음과 같이 표시됩니다:
