(공유) 나만 모르는 웹 폰트 사용법이 있다? - 혹시 구글폰트 몰라?
안녕하세요 ~
HTML / CSS를 공부하고 있는 학생입니다
여러분들 보통은 웹 개발에 처음 오게 되시면
다른 동영상이나 다른 개발하시는 분들을 봐도 대부분 Visual Studio Code를 추천하시니까
많이들 사용하시는거 같아요
저도.. 처음에는 bracket을 사용하다가 Visual Studio Code로 넘어왔습니다
위 사진의 텍스트가 기본 텍스트로 지정되어 있습니다
물론.. 저는 깔끔한 걸 좋아하다 보니 서체가 이쁜데
이제 개발을 하시다 보면 어떤 주제에 맞는 폰트들을 사용해야 하실 일들이 분명히 있잖아요??
이렇게 동글동글하게 예쁜 글씨체도 있네요
그럴 때를 위한!!
3분 안에 할 수 있는 웹폰트 지정법을 알려드리겠습니다
-- 저작권 걱정 없습니다 --
우선
구글에 "구글 폰트" 검색
또는
아래 링크를 클릭해주세요
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
이렇게 들어오셨으면
다양한 폰트들 중에 어떤 걸 선택해야 할지 정하는 일이 남았겠죠??
Type Something에서 특정 단어들을 적어보신 후 선택하셔도 되고
Language에서 "Korean"을 필터 해주시면 예쁜 한글 폰트들만 나옵니다
저는 위에 사용했던 폰트와 같은
"Gaegu"
폰트를 사용할 거고요
필요하신 font-weight를 선택해주세요
잘 보이실지 모르겠지만
주황색 박스의 코드는
html 파일의 <head> 와 <head> 사이에 붙여 넣어 주시고요
파란색 박스 코드는
CSS의 body 요소 안에 넣어주세요
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Gaegu:wght@400;700&display=swap" rel="stylesheet">
<!-- //Google Fonts -->
<link rel="stylesheet" href="fonts.css">
<title>Fonts</title>
</head>
<body>
<h1>안녕하세요</h1>
<h1>Hello</h1>
</body>
</html>
body {
font-family: "Gaegu", cursive;
}
이렇게 해주시면 쉽고 간단하게 내 마음대로
홈페이지의 폰트를 바꾸실 수 있어요
물론 웹뿐만 아니라 디자인 작업하시는 분들은
Font-Family를 다운로드하셔서 컴퓨터에 직접 저장하고 쓰실 수도 있습니다
간단한 동영상도 하나 남기도록 하겠습니다
이상 너무나도 쉽고 간단한 Google Fonts 적용하는 방법 마치겠습니다
여러분 모두 코로나 조심하시고요 행복한 하루 보내세요
감사합니다!!
'웹코딩 공부&공유 > css' 카테고리의 다른 글
| [html/css] @keyframes 를 활용한 텍스트 효과 - 첫번째 (1) | 2020.12.23 |
|---|---|
| 나혼자 웹 독학 - css flex(플렉스)를 활용한 메뉴바 만들기 (0) | 2020.08.01 |
댓글