2022.04.14
구글 폰트(Google font)
- 구글 폰트는 라이선스에서 자유로운 글꼴 라이브러리이자 글꼴을 편하게 사용할 수 있도록 라이브러리와 ☞API를 둘러보기 위한 상호작용 웹 디렉터리
구글 폰트(Google font) 사용방법
- https://fonts.google.com/ 로 이동한다
- 원하는 폰트를 고른다
- '+ Select this style' 클릭을 한 후 'selected familiy' 클릭
- Use on th web에 link를 복사해서 html head부분에 붙여넣는다
<html> <head> <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:wght@100&display=swap" rel="stylesheet"> </head> </html> - 다시 구글폰트 사이트로 들어와 CSS rules to specify families 에 있는 내용을 복사 한 후 css에 붙여넣는다
body { font-family: 'Roboto', sans-serif; } - font잘 적용됐나 확인 방법
- 페이지 검사
- 적용된 부 분 클릭
- computed 누르기
- font-family
구글 머티리얼 아이콘(Google Material Icons)
- 구글에서 무료로 제공하고 있는 폰트형식으로 된 아이콘으로
material아이콘의 기본크기는 font-size: 24px; 폰트사이즈로 조절
구글 머티리얼 아이콘(Google Material icons)적용방법
- https://developers.google.com/fonts/docs/material_icons#icon_font_for_the_web 로 이동한다
- Setup Method 1. Using via Google Fonts 부분에 있는 링크를 복사한다
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> - 복사한 링크를 html head 부분에 붙여넣는다
- 아래 아이콘이 잘 적용됐다면 성공
<span class="material-icons md-18">face</span> - https://fonts.google.com/icons 로 이동해서 원하는 아이콘을 찾아서 적용
'프론트엔드 > HTML' 카테고리의 다른 글
| HTML 클래스 속성 작명법 (0) | 2022.04.14 |
|---|---|
| 파비콘(favicon), 오픈그래프(Open Graph Protocol) 적용방법 (0) | 2022.04.14 |
| HTML 시멘틱태그(sementic tag) (0) | 2022.04.05 |
| HTML (0) | 2022.04.05 |
| 특수 문자 용어 (0) | 2022.04.05 |