EverGiver

외부 폰트 본문

Front-End (웹)/HTML

외부 폰트

친절한개발초보자 2021. 8. 27. 00:11
728x90
외부 폰트

 

 

Google Fonts

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

fonts.google.com

  • 사용법
    - 사이트 가운데 Type something 부분에 원하는 내용을 타이핑해주면 웹사이트에 나열되어 있는 다양한 폰트에서
    해당 내용을 작성했을 때 어떻게 보이는지 미리 보기 할 수 있다.
    - Type something 오른쪽 px이 적혀있는 막대 바 드래그해서 조절 시 폰트 사이즈 조절 미리 보기 가능하다.
  • 원하는 폰트 적용방법
    1. 구글 폰트 사이트 접속 후 원하는 폰트 선택
    2. 폰트 페이지로 이동하면 폰트 옆 select this style 전부 눌러주기
    3. 오른쪽에 사이드 메뉴가 뜨면 하단부에 link라고 적혀 있는 구문 전부 복사
    4. 자신의 html 파일 title 밑에 붙여 넣기
    5. 다시 사이트로 가서 복사해줬던 link 부분 밑에 font-family 부분 복사
    6. html css로 와서 적용 원하는 태그에 붙여 넣기
  • 적용한 폰트 굵기 바꿔주는 방법
    - font-weight:값 (px 붙이지 말 것)
  • 폰트 사용 시 태그 자체에 폰트에 관한 고유의 특징이 있는 폰트는 구글 폰트 적용 시 글자가 깨지는 현상이 있다.
    → 해결방법: 이런 경우에는 폰트 스타일이 하나밖에 없다고 해도 font-weight 사용해준다.
    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>외부폰트 #1</title>
    <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=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
    <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=Nanum+Pen+Script&display=swap" rel="stylesheet">
    <style>
        *{margin:0;padding:0}
        h1{font-family: 'Noto Sans KR', sans-serif;
            font-weight:100}
        
        h2{font-family: 'Nanum Pen Script', cursive;
            font-size:60px;font-weight:400;}
    </style>
</head>
<body>
    <h1>안녕하세요 h1태그 입니다</h1>
    <h2>안녕하세요 h2태그 입니다</h2>
</body>
</html>​
    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>외부폰트 #2</title>
    <style>
        *{margin:0;padding:0}
        p{font-size:50px;font-family:"b";
            font-weight:400;}
        
        @font-face{font-family:"a";src:url("BMT.ttf")}
        
        @font-face{font-family:"b";src:url("NanumGothic-ExtraBold.ttf")}
    </style>
</head>
<body>
    <p>안녕하세요 반갑습니다</p>
</body>
</html>​

cf) 웹사이트 작업 시 괜찮은 폰트
    ★ 한국어 - Noto Sans KR / Nanum 시리즈
    ★ 영어 - Roboto / Lato / Noto Sans
cf) TTF, OTF
    - TTF
      : 윈도우 환경에 조금 더 좋다.
    - OTF
      : MAC 환경에 조금 더 좋다.

 

웹 폰트 사용하기

 

  • 웹 폰트란?
    - 웹 문서의 텍스트는 사용자 시스템에 설치된 글꼴을 사용해 화면에 표시된다.
    - CSS3가 웹 폰트를 표준으로 채택한 덕분에 사용자 시스템에 없는 글꼴을 다른 글꼴로 대체하지 않아도 된다.
    - 웹 폰트를 사용하려면 웹 문서를 작성할 때 글꼴 정보를 함께 지정해야 한다.
      (기존에 가지고 있던 웹 폰트를 사용했다면 웹 문서를 서버에 올릴 때 웹 폰트 파일도 함께 업로드해야 한다.)
  • 웹 폰트 업로드하고 사용하기
    @font-face {
	font-family: <글꼴 이름>;
	src: <글꼴 파일>[<글꼴 파일>, <글꼴 파일>, ...];
}​
    - font-family 속성을 사용해 글꼴 이름을 만든다. (되도록 글꼴 파일 이름과 같은 이름을 사용하는 것이 좋다.)
    - src 속성에서는 사용할 글꼴 파일의 경로를 지정한다.
    - 글꼴 파일의 경로를 지정하기 전에 local( ) 문을 사용해서 사용자 시스템에 해당 글꼴이 있는지 먼저 확인해야 한다.
    - TTF 포맷은 다른 파일 형식보다 용량이 커서 대부분의 모던 브라우저에서 지원하는 WOFF(web open font format) 포맷을 먼저 선언하고 TTF 포맷은 그 후에 선언한다.
728x90
저작자표시

'Front-End (웹) > HTML' 카테고리의 다른 글

지도 사용법 (네이버 지도)  (0) 2021.09.02
구글 개발자 도구  (0) 2021.08.29
<dfn>, <time>, <wbr> 태그  (0) 2021.08.24
입력 양식  (0) 2021.08.24
<iframe> 태그  (0) 2021.08.19
'Front-End (웹)/HTML' Related Articles more
Comments