웹폰트 글꼴 설정 방법
페이지 정보
작성자 운영자 댓글 0건 조회 10회 작성일 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
첨부파일
- S-Core_Dream_OTF.zip (3.0M) 0회 다운로드 | DATE : 2024-04-26 08:21:15
댓글목록
등록된 댓글이 없습니다.