아임웹 폰트 변경하는 방법｜HTML/CSS 커스텀 코드로 원하는 글꼴 적용하기

아임웹 폰트 변경하는 방법｜HTML/CSS 커스텀 코드로 원하는 글꼴 적용하기

홈페이지 디자인에서 폰트는 생각보다 큰 영향을 줍니다.

같은 문장이라도 어떤 글꼴을 사용하느냐에 따라 브랜드가 고급스럽게 보이기도 하고, 가볍게 보이기도 합니다.

특히 아임웹으로 홈페이지 제작을 할 때 기본 폰트만 사용하면 다른 사이트와 비슷해 보일 수 있습니다.

이번 글에서는 HTML/CSS 커스텀 코드를 활용해 아임웹 폰트를 변경하는 방법을 초보자도 따라 할 수 있게 정리해보겠습니다.

---

이 코드로 구현되는 기능 설명

이 코드는 아임웹 홈페이지 전체 또는 특정 영역의 폰트를 원하는 글꼴로 변경하는 코드입니다.

예를 들어 기본 폰트를 고딕체, 프리텐다드, 나눔스퀘어, 노토산스 같은 글꼴로 바꿀 수 있습니다.

적용 후에는 메인 문구, 버튼, 메뉴, 본문 텍스트 등 홈페이지 전체 분위기가 더 정돈되어 보입니다.

---

 

사용하면 좋은 상황

아래와 같은 경우에 사용하면 좋습니다.

상황사용 이유

기본 폰트가 마음에 들지 않을 때	브랜드 분위기에 맞게 변경 가능
홈페이지가 평범해 보일 때	폰트만 바꿔도 디자인 완성도 상승
병원, 법률사무소, 브랜드 사이트 제작 시	신뢰감 있는 웹디자인 연출 가능
아임웹 템플릿 느낌을 줄이고 싶을 때	커스텀 홈페이지처럼 보이게 구성 가능

---

 

적용 방법

아임웹 관리자 페이지에 접속한 뒤 아래 순서로 적용하면 됩니다.

1. 아임웹 관리자 접속
2. 디자인 모드 이동
3. 오른쪽 상단 환경설정 클릭
4. SEO, 헤더설정 또는 코드 삽입 메뉴 이동
5. Head Code 또는 Body Code 영역에 코드 붙여넣기
6. 저장 후 사이트 새로고침

폰트가 바로 보이지 않는다면 브라우저 캐시 때문에 늦게 반영될 수 있습니다. 새로고침을 여러 번 해보거나 시크릿 창에서 확인해보는 것이 좋습니다.

---

 

전체 코드

아래 코드는 Google Fonts의 Noto Sans KR을 불러와 아임웹 홈페이지 전체에 적용하는 예시입니다.

<!-- 아임웹 폰트 변경 코드 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<style>
  body,
  h1, h2, h3, h4, h5, h6,
  p, span, a, button,
  input, textarea, select,
  .doz_sys,
  .doz_sys * {
    font-family: 'Noto Sans KR', sans-serif !important;
  }
</style>

 

특정 섹션에만 폰트를 적용하고 싶다면 아래처럼 사용할 수 있습니다.

<style>
  #s202406_font_section,
  #s202406_font_section * {
    font-family: 'Noto Sans KR', sans-serif !important;
  }
</style>

위 코드에서 #s202406_font_section 부분은 실제 아임웹 섹션 ID로 변경해야 합니다.

---

 

코드 수정 포인트

1) 폰트 이름 변경하기

다른 폰트를 사용하고 싶다면 아래 부분을 수정하면 됩니다.

font-family: 'Noto Sans KR', sans-serif !important;

예를 들어 Pretendard를 사용한다면 아래처럼 변경할 수 있습니다.

font-family: 'Pretendard', sans-serif !important;

 

2) 특정 영역만 적용하기

홈페이지 전체가 아니라 특정 섹션만 바꾸고 싶다면 body 대신 섹션 ID를 넣으면 됩니다.

#섹션ID,
#섹션ID * {
  font-family: 'Noto Sans KR', sans-serif !important;
}

 

3) 굵기 조절하기

폰트 굵기는 font-weight로 조절할 수 있습니다.

font-weight: 500;

숫자가 높을수록 더 굵게 보입니다.

---

 

자주 발생하는 오류와 해결 방법

1) 폰트가 적용되지 않을 때

대부분 기존 아임웹 스타일이 우선 적용되고 있는 경우입니다. 이때는 !important가 들어가 있는지 확인해야 합니다.

font-family: 'Noto Sans KR', sans-serif !important;

 

2) 일부 글자만 적용될 때

버튼, 메뉴, 입력창 등은 별도 스타일이 적용되어 있을 수 있습니다. 이 경우 선택자를 더 넓게 잡아야 합니다.

.doz_sys,
.doz_sys * {
  font-family: 'Noto Sans KR', sans-serif !important;
}

 

3) 모바일에서 다르게 보일 때

모바일 전용 디자인 설정이 따로 적용되어 있을 수 있습니다. 아임웹 모바일 화면에서도 동일하게 확인해야 합니다.

적용 후에도 변화가 없을 때

캐시 문제일 가능성이 있습니다. 저장 후 새로고침하거나 시크릿 창에서 확인해보세요.

---

 

 

아임웹에서 폰트를 변경하는 작업은 복잡한 개발 작업은 아니지만, 홈페이지의 전체 분위기를 바꾸는 데 효과가 큽니다.

브랜드형 홈페이지 제작이나 감도 있는 웹디자인을 원한다면 색상, 이미지, 레이아웃만큼 폰트 설정도 함께 확인해보는 것이 좋습니다.

간단한 HTML/CSS 커스텀 코드만으로도 아임웹 홈페이지를 훨씬 더 정돈된 느낌으로 만들 수 있습니다.

 

홈페이지 제작 상담문의

믓아 스튜디오

 

아임웹 HTML 위젯 사용법

아임웹 HTML 위젯 사용법｜초보자도 가능한 커스텀 코드 적용 방법

 

아임웹 후기 슬라이드 만들기

아임웹 후기 슬라이드 만들기｜HTML CSS JS 무한 자동 슬라이드 코드