Google Fonts URL 찾는 법
파비콘 디자인에 쓸 Google Fonts URL을 찾아 복사하는 방법입니다. 순서대로 따라가면 됩니다.
왜 Google Fonts인가? Google Fonts를 권하는 이유는, 사이트에 있는 글꼴을 상업적으로도 무료로 쓸 수 있기 때문입니다. 라이선스나 추가 비용 걱정 없이 파비콘에 사용할 수 있습니다.
단계별 안내
1단계: Google Fonts 열기
브라우저에서 fonts.google.com을 엽니다. 무료 글꼴을 수천 개 둘러볼 수 있는 Google Fonts 공식 사이트입니다.
2단계: 글꼴 고르기
목록을 둘러보고 쓸 글꼴을 클릭합니다. 페이지 위쪽 검색창으로 특정 글꼴을 찾을 수도 있습니다.
3단계: 선택 목록에 추가
원하는 글꼴을 찾으면 페이지 오른쪽 위의 "Get font" 버튼을 누릅니다. 선택 목록에 추가됩니다. 이 과정을 반복해 여러 글꼴을 넣을 수 있습니다. 파비콘 메이커는 한 URL에서 여러 글꼴을 불러올 수 있으니, 필요한 만큼 추가해도 됩니다.
"Get font" 버튼은 오른쪽 위에 있습니다
4단계: 선택한 글꼴 열기
다 넣었으면 오른쪽 위의 "View selected families" 버튼을 찾습니다. 선택한 글꼴 개수가 배지로 표시됩니다. 눌러 목록을 연 다음 "Get embed code"를 눌러 코드 조각을 확인합니다.
"View selected families"를 누른 뒤 "Get embed code"를 누릅니다
모든 link 태그가 보이는 embed code 대화상자
5단계: 글꼴 URL 꺼내기
Google Fonts는 preconnect와 메인 스타일시트 등 여러 link 태그를 보여 줍니다. 대략 이런 형태입니다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"> URL에 css2가 들어 있는 link 태그를 찾으세요. 보통 가장 깁니다. href 따옴표 사이의 URL 전체를 복사합니다. 위 예시의 URL은 다음과 같습니다.
https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap 파비콘 메이커의 커스텀 폰트 입력란에 붙여넣습니다. 이 한 URL에 선택한 글꼴이 모두 들어 있습니다.
팁
- 성능이 좋아지도록 URL에 &display=swap을 꼭 포함하세요
- 실제로 쓸 글꼴만 골라 로딩 시간을 줄이세요
- URL 전체를 복사하세요. 일부가 빠지면 파비콘 메이커가 글꼴을 불러오지 못할 수 있습니다