(공유) 나만 모르는 웹 폰트 사용법이 있다? - 혹시 구글폰트 몰라?
안녕하세요 ~
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 적용하는 방법 마치겠습니다
여러분 모두 코로나 조심하시고요 행복한 하루 보내세요
감사합니다!!
| [html/css] @keyframes 를 활용한 텍스트 효과 - 첫번째 (1) | 2020.12.23 |
|---|---|
| 나혼자 웹 독학 - css flex(플렉스)를 활용한 메뉴바 만들기 (0) | 2020.08.01 |
댓글