[Web/CSS] CSS - 웹 폰트 사용하기

티스토리 뷰

Web/CSS

[Web/CSS] CSS - 웹 폰트 사용하기

poopooreum 2024. 4. 22. 12:31

✏️ 웹 폰트란?

사용자가 직접 원하는 글꼴을 사용하고 싶을 때 웹 상에서 다운받아서 사용할 수 있는 글꼴

CSS3가 웹 폰트를 표준으로 채택함으로써 많은 작업들이 편리해짐

✏️ 웹 폰트 사용 방법

1. 웹 상에서 제공해 주는 경우에는 주로 링크를 사용

2. 그렇지 않거나 자신이 가지고 있는 TFT 폰트를 변환해서 사용할 때는 방법이 달라짐

=> 컴퓨터에서 사용하는 글꼴은 트루타입(TrueType)이고 파일 확장자는 *.tff이나, tff는 파일 크기가 커서 웹에서 사용하기에는 적절하지 않음. 그래서 사용하는 확장자가 EOT와 WOFF, WOFF2를 많이 사용

@font-face {
  font-family: <글꼴 이름>;
  src: <글꼴 파일>;
}

font-family를 통해 앞으로 이런 속성은 이런 이름으로 사용하겠다~를 지정
src에는 글꼴 파일의 경로를 지정, 파일의 경로를 지정하기 전에 local()문을 통해서 
사용자에게 이 글꼴이 있는지 없는지를 확인, 만약 없다면 WOFF 포맷으로 된 글꼴을 내려받아야 함

✏️ 직접 웹 폰트 파일을 준비해서 업로드 후 글꼴 적용시키기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>웹 폰트 사용하기</title>
    <style>
      @font-face {
        font-family: 'Ostrich';  /* 폰트 이름 */
        src: local('Ostrich Sans'),
              url('fonts/ostrich-sans-bold.woff') format('woff'),
              url('fonts/ostrich-sans-bold.ttf') format('truetype'),
              url('fonts/ostrich-sans-bold.svg') format('svg');
      }
      .wfont {
        font-family:'Ostrich', sans-serif; /* 웹 폰트 지정 */
      }
      p {
        font-size:30px; /* 글자 크기 */
      }
    </style>
</head>
<body>
  <p>Using Default Fonts</p>
  <p class="wfont">Using Web Fonts</p>
</body>
</html>

✏️ 무료 웹 폰트 사용해보기

1. 구글 폰트 사이트에서 원하는 웹 폰트 찾기

https://fonts.google.com/

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

2. 화면을 클릭 후 get embed code를 클릭

3. import버튼을 눌러서 속성이 보이도록 하고, 각각의 코드를 복사해서 html파일에 붙여 넣기

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>구글 폰트 사용하기</title>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
     
      h1 {
        font-size:60px;
        font-weight:bold;      
        font-family:'Nanum Pen Script', cursive;
      }
    </style>
  </head>
  <body>
    <h1>HTML+CSS+JavaScript</h1>
  </body>
</html>

저작자표시 비영리 변경금지

'Web > CSS' 카테고리의 다른 글

[Web/CSS] CSS - 목록 스타일 (0)	2024.04.22
[Web/CSS] CSS- 텍스트 관련 스타일 (0)	2024.04.22
[Web/CSS] CSS - 글꼴 관련 스타일 (0)	2024.04.22
[Web/CSS] CSS - 복습1 (0)	2024.04.22
[Web/CSS] CSS - 캐스캐이딩 스타일 시트 알아보기 (0)	2024.04.21

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/07 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

글 보관함

푸으름

티스토리 뷰