1. Google Fonts 페이지 방문
해당 페이지에서 Google이 제공하는 다양한 폰트를 확인 할 수 있다.
2. 원하는 폰트 선택
원하는 폰트 종류(Font-Family)를 선택한 이후 하단에 나열되는 폰트 세부 형태를 결정하고 "Select"를 클릭하면 우측 세부정보 창이 나타난다.
3. 폰트 참조 링크 복사
세부정보 창에서 copy code 탭의 "@import"를 선택하면
HTML style탭에 입력 할 수 있는 폰트 코드 링크가 제공된다.
4. 해당 코드를 작성중인 HTML 문서의 style 태그 내 삽입
<style>
@import url('https://fonts.googleapis.com/css2?family=Gothic+A1&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&family=Noto+Serif+KR&family=Orbit&display=swap');
</style>
HTML
복사
5. 선택자를 통해 원하는 폰트 적용
이후 다시 Google Fonts의 세부정보 창 @import 하단의 "CSS rules to specify families"의 내용을 복사하여
style 태그 내 원하는 선택자(*는 모든것, class, id 등 부여한 속성에 따라 선택 가능)의 클립보드 내용을 붙여넣기 하면 폰트가 적용 됨
<style>
@import url('https://fonts.googleapis.com/css2?family=Gothic+A1&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&family=Noto+Serif+KR&family=Orbit&display=swap');
* {
font-family: 'Gothic A1', sans-serif;
font-family: 'Nanum Gothic Coding', monospace;
font-family: 'Noto Sans KR', sans-serif;
font-family: 'Noto Serif KR', serif;
font-family: 'Orbit', sans-serif;
}
</style>
HTML
복사