티스토리 웹 참조로 폰트변경 해보기.
폰트를 변경하는 방법은 크게 두가지로 나눠진다.
1. 직접 참조 (폰트 파일 업로드)
말 그대로 폰트파일을 서버에 업로드하여 해당 폰트를 직접 참조하는것이다.
아래 highlight.js 내부의 폰트를 변경한 방법이 직접 참조에 해당한다.
[Blog] highlight.js 폰트 변경 하기 (D2 Coding 폰트 티스토리 적용)
highlight.js에 쓰이는 폰트를 변경해보자.제목 라벨과 Copy버튼을 넣고 가만히 보고 있었는데 뭔가 자꾸 어색한 느낌이 들어서 뭐 때문인지 몰랐다가 Visual Studio를 켜고난뒤에 알았다. 폰트가 코딩
mirwebma.tistory.com
2. 외부 참조 (URL 참조)
이번에 해볼방법은 외부 참조이다. (사실 직접참조로 글꼴을 업로드 할려고 했으나.. 티스토리 이미지 폴더 용량이 꽉 차서 못 올린다. ㅠㅠ)
외부참조로 네이버 글꼴을 가져올 예정이다. 네이버 글꼴을 가져오는 이유는 외부참조 하기 편하게 되있기도 하고 라이센스도 열려있기 때문이다.
아래 네이버 글꼴의 라이센스를 한번 확인하자.(참고로 Adobe쪽 글꼴은 함부로 잘못사용하면 큰일난다.)
돈받고 파는거외에는 어떠한 제약사항도 없으니 맘편하게 가져와서 사용하도록 하자.
1. 네이버글꼴 사이트에 접속
네이버 글꼴 모음
네이버가 만든 150여종의 글꼴을 한번에 만나보세요
hangeul.naver.com
2. 마음에 드는 글꼴을 선택
3. 해당 글꼴의 URL과 설정값을 확인
4. HTML <Head>구역에 URL복사
5. CSS에서 폰트 적용
.article-view p {
font-size: 15px;
line-height: 26px;
font-family: 'NanumBarunGothic',AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;
color: #707070;
}필자는 일반 텍스트에 적용하기 위해 <p>를 기준으로 바꿔주었다.
각자 원하는 위치의 font-family 제일 앞부분에 추가만 해줘도 된다.
관련글
| [Blog] highlight.js 폰트 변경 하기 (D2 Coding 폰트 티스토리 적용) |
| 날다의 운영환경 | |
|---|---|
| 본체 | DeskTop |
| O S | Windows11 Pro |
| Browser | Google Chrome |
'Blog' 카테고리의 다른 글
| [Blog] 티스토리가 광고수익을 나눠가진다고? (0) | 2025.01.11 |
|---|---|
| [Blog] 구글 애드센스 오류 (티스토리 자동광고 충돌) adsbygoogle.push() error: (0) | 2025.01.10 |
| [Blog] highlight.js 폰트 변경 하기 (D2 Coding 폰트 티스토리 적용) (0) | 2025.01.10 |
| [Blog] highlight.js 소스 복사 기능 추가(복사 버튼 추가) (0) | 2025.01.10 |
| [Blog] highlight.js 제목 라벨 기능 추가(사용 언어 표시) (0) | 2025.01.09 |