직접 서버에서 웹폰트를 적용하는 방법
Link 방식이나 Import 방식이 아닌 직접 스타일시트(CSS)에 작성하고 웹폰트를 다운로드 후 티스토리 스킨편집 → 파일 업로드를 통해 웹폰트를 설정하는 방법이다. 매우 간단하고, 빠르고, 쉽다. 또한 티스토리에서 직접 웹폰트를 불러와서 뿌려주기 때문에 가장 빠르고 가볍다. 방법은 간단하다. 웹폰트를 다운로드 받고, 파일 업로드를 통해 웹폰트를 업로드한 후, 스킨편집에서 스타일시트(CSS)에 아래로 웹폰트 주소를 설정한다.
굵기별로 웹폰트를 지정할 때
그 다음, 적용하고자 하는 요소에 폰트패밀리를 나눔스퀘어(NanumSquare)로 지정하면 웹폰트 설정이 완료된다. 웹폰트의 굵기 설정은 font-weight로 지정하며, 400, 700, 800, 300으로 각각 지정할 수 있다.
@font-face {
font-family: 'NanumSquare';
font-weight: 400;
src: url(./images/NanumSquareR.eot);
src: url(./images/NanumSquareR.eot?#iefix) format('embedded-opentype'),
url(./images/NanumSquareR.woff) format('woff'),
url(./images/NanumSquareR.ttf) format('truetype');
}
@font-face {
font-family: 'NanumSquare';
font-weight: 700;
src: url(./images/NanumSquareB.eot);
src: url(./images/NanumSquareB.eot?#iefix) format('embedded-opentype'),
url(./images/NanumSquareB.woff) format('woff'),
url(./images/NanumSquareB.ttf) format('truetype');
}
@font-face {
font-family: 'NanumSquare';
font-weight: 800;
src: url(./images/NanumSquareEB.eot);
src: url(./images/NanumSquareEB.eot?#iefix) format('embedded-opentype'),
url(./images/NanumSquareEB.woff) format('woff'),
url(./images/NanumSquareEB.ttf) format('truetype');
}
@font-face {
font-family: 'NanumSquare';
font-weight: 300;
src: url(./images/NanumSquareL.eot);
src: url(./images/NanumSquareL.eot?#iefix) format('embedded-opentype'),
url(./images/NanumSquareL.woff) format('woff'),
url(./images/NanumSquareL.ttf) format('truetype');
}
- 나눔스퀘어 웹폰트 출처 및 다운로드 링크
'Style > Font' 카테고리의 다른 글
한글 무료 폰트 말싸미 815(malssami815) (0) | 2021.07.11 |
---|---|
[한글무료폰트] 작은 크기에서도 선명한 완도청정바다체 (0) | 2021.06.22 |
[한글무료폰트] 티웨이항공체 / 티웨이하늘체 /티웨이날다체 (0) | 2021.06.09 |
라즈다니(Rajdhani) 영문글꼴(Google Fonts) (0) | 2021.04.08 |
윈도우 (XP·2000·98SE·NT·Workstation 4.0) 기본 영문폰트 목록 (0) | 2020.12.27 |
[영문유료폰트] 디자이너라면 알아야할 폰트 : Gilroy Typeface (0) | 2020.10.27 |
[비상업적무료폰트] 한글 손글씨 폰트 :: 온글잎 만두몽키체 (0) | 2020.10.22 |
[한글무료폰트] 빙그레 서체 :: 메로나체 다운로드 (0) | 2020.10.22 |