자료실

Global It Leader!!


폰트보관함

웹폰트 글꼴 설정 방법

페이지 정보

작성자 운영자 댓글 0건 조회 55회 작성일 24-04-26 08:04

본문

1. link 방식


<link rel="stylesheet" type="text/css" href=" 폰트url ">

사용할 웹폰트의 링크태그를 <head> 태그 내부에 붙여 넣기


2. import 방식

@import url(' 폰트url ');

사용할 웹폰트의 import 코드를 <style> 태그, 또는 css파일 최상단에 붙여 넣기


3. font-face 방식

@font-face {

     font-family: '폰트';

     src: url('eot');

     src: url('eot?#iefix') format('embedded-opentype'),

          url('woff2') format('woff2'),

          url('woff') format('woff'),

          url('ttf') format("truetype");

     font-display: swap;

}

사용할 웹폰트의 font-face 코드를 <style> 태그, 또는 css파일 최상단에 붙여 넣기


위 3가지 방법으로 폰트를 가져왔다면 적용하고 싶은 부분의 폰트속성으로 해당 폰트값을 지정해 주면 된다.


.title{

  font-family : '폰트이름';

}


<예시> 에스코어드림


1. Link 방식

<link href="https://webfontworld.github.io/SCoreDream/SCoreDream.css" rel="stylesheet">

또는

<link href="https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream.css" rel="stylesheet">


2. Import 방식

@import url('https://webfontworld.github.io/SCoreDream/SCoreDream.css');

또는

@import url('https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream.css');

3. CSS 방식

@font-face {

    font-family: 'SCoreDream';

    font-weight: 100; 

    font-style: normal; 

    src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream1.woff2) format('woff2'),

         url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream1.woff) format('woff');

    font-display: swap;

}

@font-face {

    font-family: 'SCoreDream';

    font-weight: 200; 

    font-style: normal; 

    src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream2.woff2) format('woff2'),

         url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream2.woff) format('woff');

    font-display: swap;

}

@font-face {

    font-family: 'SCoreDream';

    font-weight: 300; 

    font-style: normal; 

    src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream3.woff2) format('woff2'),

         url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream3.woff) format('woff');

    font-display: swap;

}

@font-face {

    font-family: 'SCoreDream';

    font-weight: 400; 

    font-style: normal; 

    src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream4.woff2) format('woff2'),

         url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream4.woff) format('woff');

    font-display: swap;

}

@font-face {

    font-family: 'SCoreDream';

    font-weight: 500; 

    font-style: normal; 

    src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream5.woff2) format('woff2'),

         url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream5.woff) format('woff');

    font-display: swap;

}

@font-face {

    font-family: 'SCoreDream';

    font-weight: 600; 

    font-style: normal; 

    src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream6.woff2) format('woff2'),

         url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream6.woff) format('woff');

    font-display: swap;

}

@font-face {

    font-family: 'SCoreDream';

    font-weight: 700; 

    font-style: normal; 

    src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream7.woff2) format('woff2'),

         url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream7.woff) format('woff');

    font-display: swap;

}

@font-face {

    font-family: 'SCoreDream';

    font-weight: 800; 

    font-style: normal; 

    src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream8.woff2) format('woff2'),

         url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream8.woff) format('woff');

    font-display: swap;

}

@font-face {

    font-family: 'SCoreDream';

    font-weight: 900; 

    font-style: normal; 

    src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream9.woff2) format('woff2'),

         url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream9.woff) format('woff');

    font-display: swap;

}


※ 에스코어 드림 글꼴 다운로드 주소

https://s-core.co.kr/wp-content/uploads/2020/03/S-Core_Dream_OTF.zip 

첨부파일

댓글목록

등록된 댓글이 없습니다.