그누보드5 글꼴 바꾸기 기능 추가 > 코딩 스토리

head.sub.php의 </head> 바로 위에 아래의 코드를 삽입합니다.

[code]

<!-- 폰트 커스텀{ -->

<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/nanumgothic.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/nanummyeongjo.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/nanumbrushscript.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/nanumpenscript.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/jejugothic.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/jejuhallasan.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/jejumyeongjo.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/hanna.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/kopubbatang.css">

<style>

body, .latest_member_id, .latest_subject, .latest_content {

font-family: 'Nanum Gothic', sans-serif;

}

</style>

<!-- }폰트 커스텀 -->

[/code]

그다음 아래의 코드를 원하는 페이지에 삽입합니다.

[code]

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<style>

#fontSelector {

display: none; /* 처음에는 숨김 */

}

</style>

<i class="fa fa-cog" id="gearIcon" style="cursor: pointer;"></i>

<select id="fontSelector">

<option value="Nanum Gothic">나눔고딕</option>

<option value="Nanum Myeongjo">나눔명조</option>

<option value="Nanum Gothic Coding">나눔고딕 코딩</option>

<option value="Nanum Brush Script">나눔손글씨 붓</option>

<option value="Nanum Pen Script">나눔손글씨 펜</option>

<option value="Jeju Gothic">제주 고딕</option>

<option value="Jeju Hallasan">제주 한라산</option>

<option value="Jeju Myeongjo">제주 명조</option>

<option value="Hanna">한나체</option>

<option value="KoPub Batang">바탕체</option>

</select>

<script>
   const gearIcon = document.getElementById('gearIcon');
   const fontSelector = document.getElementById('fontSelector');
   gearIcon.addEventListener('click', () => {
       // fontSelector의 표시 상태를 토글
       if (fontSelector.style.display === 'none' || fontSelector.style.display === '') {
           fontSelector.style.display = 'block';
       } else {
           fontSelector.style.display = 'none';
       }
   });
</script>

[/code]

사용하는 폰트의 종류는

https://m.blog.naver.com/PostView.naver?blogId=ohhyun93&logNo=221071033677&proxyReferer=https:%2F%2Fwww.google.com%2F&trackingCode=external

에서 소개하는 폰트를 사용하였습니다.

좋아요0 이 글을 좋아요하셨습니다