쇼핑몰 관리 도구

⌘K

폰트 미리보기

다양한 웹폰트를 미리보고 CSS 코드를 생성합니다.

폰트 선택

폰트 설정

크기: 24px

두께

줄 간격: 1.5

자간: 0px

글자 색상

배경 색상

CSS 코드

CSS 속성

font-family: "Inter", sans-serif;
font-size: 24px;
font-weight: 400;
line-height: 1.5;
color: #333333;

HTML + CSS

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

<style>
.custom-font {
    font-family: "Inter", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5;
  color: #333333;
}
</style>

미리보기

Inter • 24px • 400

The quick brown fox jumps over the lazy dog. 가나다라마바사아자차카타파하.

다양한 크기

12px

Inter - The quick brown fox jumps over the lazy dog

16px

Inter - The quick brown fox jumps over the lazy dog

20px

Inter - The quick brown fox jumps over the lazy dog

24px

Inter - The quick brown fox jumps over the lazy dog

32px

Inter - The quick brown fox jumps over the lazy dog

48px

Inter - The quick brown fox jumps over the lazy dog

사용법

왼쪽에서 사용할 웹폰트를 선택하세요.
가운데에서 폰트 크기, 두께, 줄간격 등을 조정하세요.
미리보기 영역에서 실제 적용된 모습을 확인하세요.
CSS 코드나 HTML+CSS 코드를 복사하여 사용하세요.
다양한 크기로 폰트가 어떻게 보이는지 확인할 수 있습니다.