반응형
google font를 html or css 에 link 에 넣을 때 구글 폰트 두께weight를 추가해서 넣는 법
1. 구글님의 페이지로 고우.
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
2. 원하는 폰트 선택.
select fonts what you wannaaaa
3. 여기에서 왼쪽! Weight를 조절하면 된다.
100은 light 매우 가느다란 서체, 400은 일반적인 서체 regular, 900은 굵은 서체 bold
100으로 드래그한 뒤에
4. 스타일 선택
중간 서체 미리보기한 부분을 내려보면 3개의 style이 보이는데 weight:100인 부분을 select를 누른다
5. Selected Families
에 추가가 되었는지 확인
6. css 링크 활용
이 링크를 tistory <head></head>부분 등에 붙여넣기 하기
코드는 다음과 같이 100;400;900으로 추가가 되었다.
<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=Montserrat:wght@100;400;900&family=Ubuntu&display=swap" rel="stylesheet">css로 불러오기 위해서는 해당되는 id 나 class
#id-ex { font-family: "Montserrat-light", sans-serif; }
.head-ex { font-family: "Montserrat-Black", sans-serif; }
이 방법으로 안 먹는다면,
#id-ex { font-family: "Montserrat", sans-serif; font-weight: 900; }
.head-ex { font-family: "Montserrat", sans-serif; font-weight: 900;}
그냥 weight를 추가해주기!
반응형
'Programming' 카테고리의 다른 글
| bootstrap이 안 될 때 bootstrap v5 와 v4 (2) | 2022.09.18 |
|---|---|
| atom packages 설치하기, atom-beautify, 한꺼번에 코드 타이핑하기 (0) | 2022.09.18 |
| 3개의 변수 전역변수, 지역변수, 매개변수 (0) | 2022.04.29 |
| 개체 무결성 (0) | 2022.04.29 |
| 용어 정리) TCP/IP 플래그 비트 , 영속 계층의 DAO, DTO, VO (0) | 2022.04.29 |