추가로 웹 브라우저에 표시되는 텍스트를 좀 더 예쁘게 보이도록 웹 폰트를 적용해 보겠습니다. 여기서는 구글 폰트(https://fonts.google.com)에서 지원하는 글꼴 중 Varela Round와 Poppins를 적용합니다. 구글 폰트를 적용하는 방법은 6.9.1 구글 폰트 적용하기를 참고해 주세요.
13/end/css/main.css - CSS 파일의 맨 윗줄에 추가
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Varela+Round&display=swap');
13/end/css/main.css - 웹 폰트 추가
main h2{
(중략)
letter-spacing:3px;
font-family:"Varela Round", sans-serif;
}
여기까지 작성하고 웹 브라우저로 실행하면 메인 화면은 다음과 같습니다.
그림 13-7 메인 영역 CSS 코드 작성 결과