재우니의 블로그

CSS : SUIT WEB FONT 폰트 사이트 적용하기

프로그래밍/HTML
2024. 10. 21. 19:04

CSS : SUIT WEB FONT 폰트 사이트 적용하기

 

SUIT 폰트 다운로드 

https://sun.fo/suit/

 

 

 

웹폰트 적용하기

SUIT 폰트를 웹사이트에 적용하려면 @font-face 규칙을 사용합니다. 각 폰트 굵기마다 별도의 @font-face 선언이 필요합니다. 아래는 SUIT 폰트의 모든 굵기를 적용하는 CSS 코드입니다.

다운로드 받은 폰트들은 fonts 폴더를 생성하고 otf, ttf, woff2 폰트 파일들을 저장한 다음, 이를 css 에 아래와 같이 상대경로로 지정하면 됩니다.

 

@font-face {
  font-family: "SUIT";
  font-weight: 100;
  font-style: normal;
  src: url("../fonts/SUIT-Thin.otf") format("opentype"),
       url("../fonts/SUIT-Thin.woff2") format("woff2"),
       url("../fonts/SUIT-Thin.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "SUIT";
  font-weight: 200;
  font-style: normal;
  src: url("../fonts/SUIT-ExtraLight.otf") format("opentype"),
       url("../fonts/SUIT-ExtraLight.woff2") format("woff2"),
       url("../fonts/SUIT-ExtraLight.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "SUIT";
  font-weight: 300;
  font-style: normal;
  src: url("../fonts/SUIT-Light.otf") format("opentype"),
       url("../fonts/SUIT-Light.woff2") format("woff2"),
       url("../fonts/SUIT-Light.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "SUIT";
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/SUIT-Regular.otf") format("opentype"),
       url("../fonts/SUIT-Regular.woff2") format("woff2"),
       url("../fonts/SUIT-Regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "SUIT";
  font-weight: 500;
  font-style: normal;
  src: url("../fonts/SUIT-Medium.otf") format("opentype"),
       url("../fonts/SUIT-Medium.woff2") format("woff2"),
       url("../fonts/SUIT-Medium.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "SUIT";
  font-weight: 600;
  font-style: normal;
  src: url("../fonts/SUIT-SemiBold.otf") format("opentype"),
       url("../fonts/SUIT-SemiBold.woff2") format("woff2"),
       url("../fonts/SUIT-SemiBold.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "SUIT";
  font-weight: 700;
  font-style: normal;
  src: url("../fonts/SUIT-Bold.otf") format("opentype"),
       url("../fonts/SUIT-Bold.woff2") format("woff2"),
       url("../fonts/SUIT-Bold.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "SUIT";
  font-weight: 800;
  font-style: normal;
  src: url("../fonts/SUIT-ExtraBold.otf") format("opentype"),
       url("../fonts/SUIT-ExtraBold.woff2") format("woff2"),
       url("../fonts/SUIT-ExtraBold.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "SUIT";
  font-weight: 900;
  font-style: normal;
  src: url("../fonts/SUIT-Heavy.otf") format("opentype"),
       url("../fonts/SUIT-Heavy.woff2") format("woff2"),
       url("../fonts/SUIT-Heavy.ttf") format("truetype");
  font-display: swap;
}

 

 

코드 설명

  1. font-family: 모든 굵기에 대해 "SUIT"라는 동일한 폰트 패밀리 이름을 사용합니다. 이렇게 하면 CSS에서 폰트 굵기만 변경하여 다양한 스타일을 적용할 수 있습니다.
  2. font-weight: 100(Thin)부터 900(Heavy)까지 다양한 굵기를 제공합니다.
  3. src: 각 굵기마다 세 가지 폰트 형식(OpenType, WOFF2, TrueType)을 제공합니다. 브라우저는 지원하는 첫 번째 형식을 사용합니다.
  4. font-display: swap: 폰트가 로딩되는 동안 시스템 폰트를 먼저 표시하고, 로딩이 완료되면 SUIT 폰트로 교체합니다. 이는 웹 페이지의 초기 로딩 속도를 개선합니다.

 

 

 

활용해 보기

 

위의 @font-face 규칙을 사용하여 웹 페이지에서 폰트를 적용하는 예시를 알려드리겠습니다. SUIT 폰트 패밀리의 다양한 굵기를 HTML 요소에 적용하는 방법을 예로 들면 다음과 같습니다.

1. 글꼴 설정 예시

아래는 CSS에서 다양한 굵기를 적용하는 방법입니다.

 

/* 기본 폰트 적용 */
body {
  font-family: 'SUIT', sans-serif;
}

/* 얇은 폰트 (100 weight) 적용 */
.light-text {
  font-weight: 100;
  font-size: 16px;
}

/* 일반 굵기 (400 weight) 적용 */
.normal-text {
  font-weight: 400;
  font-size: 18px;
}

/* 굵은 폰트 (900 weight) 적용 */
.bold-text {
  font-weight: 900;
  font-size: 20px;
}

 

2. HTML에서의 적용

아래는 위의 CSS를 사용하여 HTML 문서에서 폰트를 적용하는 예시입니다.

 

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Face Example</title>
  <link rel="stylesheet" href="styles.css"> <!-- CSS 파일 링크 -->
</head>
<body>

  <h1 class="normal-text">This is a heading using SUIT Regular</h1>
  <p class="light-text">This is a paragraph using SUIT Thin (100 weight)</p>
  <p class="bold-text">This is a paragraph using SUIT Heavy (900 weight)</p>

</body>
</html>

 

3. 요약

  • @font-face로 정의한 SUIT 폰트를 font-family: 'SUIT', sans-serif;를 통해 페이지에서 사용할 수 있습니다.
  • font-weight 속성을 사용하여 폰트의 굵기를 조정할 수 있으며, 예를 들어 font-weight: 100은 Thin, font-weight: 900은 Heavy 스타일을 적용합니다.
  • 이렇게 다양한 굵기를 HTML 요소에 지정하여 텍스트 스타일링이 가능합니다.

 

 

저작자표시 비영리 동일조건

'프로그래밍 > HTML' 카테고리의 다른 글

html : froala Editor 사용하여 콘텐츠 작성 및 미리보기 설정하기  (4) 2024.09.11
html_css : 마우스 우클릭 방지와 텍스트 드래그 방지를 구현 (Prevent right-clicking and dragging text)  (0) 2024.08.29
html : 애니메이션 효과, 특정 텍스트 자주색으로 형광펜 칠하듯이 보여주기  (0) 2024.08.22
image, xml, javascript, css, font 파일을 base64 로 치환하여 html 적용해 보기  (0) 2024.08.15
[JS] google calendar 와 outlook live 일정 추가하기  (2) 2023.12.21

티스토리툴바