2. 아래와같이 오른쪽 사이드에 보시면 해당 폰트에 대한 정보가 있습니다. @import를 클릭하여 보여지는 코드를 복사해주세요. <style></style> 안의 코드만 복사해주시면 됩니다.
* 추가한 웹폰트의 정보가 보이지 않는다면 오른쪽 상단에 장바구니 아이콘을 클릭해보세요.
2. 추가하고자하는 웹폰트의 이름은 아래 font-family의 내용을 기억해주세요. 아래 이미지에서는 'Noto Sans KR'가 해당 웹폰트의 이름이 됩니다.
2. [관리자 페이지] > [스킨 편집] > [html편집] > [css] 의 위쪽에 복사해둔 코드를 붙여넣기 해주세요.
@import ~ 로 시작하는 코드가 @font-face로 시작하는 코드보다 위쪽에 위치해야합니다.
ex)
3. 이제 웹폰트를 사용할 준비는 끝났구요. /* webfont */ 로 구분되어있는 아래 이미지와 같은 부분을 찾아 font-family의 내용을 수정해주면 됩니다.
* 스킨 제작 시기에 따라 아래 사진과 다른 부분이 있을 수 있습니다. class명을 찾기 어려운 경우 컨트롤+f를 활용하세요.
body, a, input, textarea, button 기본 적용 웹폰트 .ar_title a 본문 타이틀 웹폰트 nav a 카테고리 웹폰트
웹폰트별 class명은 위처럼 구분해주시면 되며, 웹폰트를 바꾸고자 하는 class의 font-family를 위에 추가했던 웹폰트의 font-family로 수정해주시면 됩니다.
* 최근 제작 (23/10 이후) 스킨의 경우 css 상단 :root 에서 웹폰트명을 변경해주시면 됩니다.
💡TIP 컨트롤+f로 수정하고자 하는 웹폰트의 이름을 새로 바꿀 웹폰트 이름으로 전체 변경을 하시면 편합니다.
💡TIP 일본어, 중국어 등 다국어를 사용하고 있을 경우 일부 웹폰트에서는 지원되지 않는 글자가 있어 보이지 않는 경우가 있습니다. 이럴 때에는 지원을 원하는 다국어 폰트를 찾아 적용시켜주신 후에 font-family 의 한국어 웹폰트 다음으로 추가해주시면 됩니다.
ex) 1. 기본 적용 웹폰트에서 한글 폰트인 'Pretendard-Light'를 'GmarketSansMedium'라는 font-family를 가진 웹폰트로 변경하고자 한다면 아래처럼 변경해주시면 됩니다. [수정 전] body, a, input, textarea, button { /* 기본 */ font-family:'Nunito', 'Pretendard-Light', sans-serif; } [수정 후] body, a, input, textarea, button { /* 기본 */ font-family:'Nunito', 'GmarketSansMedium', sans-serif; }
2. 일본어 지원을 하는 웹폰트 'Noto Sans JP'를 추가하고자 한다면 아래처럼 변경해주시면 됩니다. 웹폰트 추가시에는 , 를 꼭 붙여주세요 ! [수정 전] body, a, input, textarea, button { /* 기본 */ font-family:'Nunito', 'Pretendard-Light', sans-serif; } [수정 후] body, a, input, textarea, button { /* 기본 */ font-family:'Nunito', 'Pretendard-Light', 'Noto Sans JP', sans-serif; /* 'Pretendard-Light' 옆에 'Noto Sans JP' 가 추가됨 */ }
#마우스커서 변경
1. 우선 마우스커서로 사용할 아이콘을 사이트에서 찾은 후 아래쪽에 Option #2의 css코드를 복사해주세요.
복사한 내용중 우리에게 필요한 것은 마우스 커서를 불러와주는 역할을 하는 url 입니다.
이때 마우스 커서의 확장자가 .cur / .png / .jpg 인 url을 복사해주세요. 움직이는 .ani / .gif 는 적용이 되지 않을 수 있습니다.
2. [관리자페이지] > [스킨편집] > [html편집] > [css] 에서 아래와 같은 부분을 찾아 url(~~~) 의 내용을 위에서 복사해온 url로 수정해주시면 새로운 마우스 커서로 적용 완료입니다.
💡 따로 제작한 커서 아이콘이 있다면 [관리자페이지] > [스킨편집] > [html편집] > [파일 업로드] 에서 커서로 사용할 파일을 업로드해주세요. (마찬가지로 ani / gif 는 적용이 되지 않을 수 있습니다.) 그 다음 [css]에서 마우스커서의 url을 url(./images/파일이름.확장자) 이런식으로 변경해주시면 됩니다. 예를들어 dal_icon 이라는 이름을 가진 png 확장자 파일을 업로드한 경우에는 url(./images/dal_icon.png) 이렇게 되겠죠 !
