구글 font 적용하기, font-size, font-weight, font-family, line-height

부트스트랩에서 구글 폰트를 적용하는 방법을 배우자.

 

1. 구글 폰트에 접속한다.

https://fonts.google.com/

Google Fonts

 

 

2. 언어를 선택한다.

한국어라면 korean/한국어를 선택한다.

 

 

3. 마음에 드는 글꼴을 선택한 후, 사이즈를 조절한다.

 

 

4. + 더하기 버튼을 눌러 폰트패밀리에 추가한다.

 

 

5. 링크를  head에 임배드(embed)한다.

<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=Cute+Font&family=Hi+Melody&family=Patrick+Hand&display=swap" rel="stylesheet">

 

 

6. CSS 코드를 넣는다.

font-family: 'Cute Font', cursive;
font-family: 'Hi Melody', cursive;
font-family: 'Patrick Hand', cursive;

 

 

CSS파일을 따로 만들어서 한다면, 

head 부분에 CSS 경로를 표시하고, CSS파일에 위의 코드를 적으면 된다.

<기본파일의 head부분>

  <link rel="stylesheet" href="css/styles.css">

<css파일>

h1{
font-size:3.5rem;
line-height:1.5;
font-family: 'Gamja Flower', cursive;
font-weight: bold;
}

font-size : 글씨 크기

font-fmaily : 사용 될 글꼴 모음

font-weight : bold=굵은 글씨

line-height :  줄 간격