웹마스터 팁

※ 이 팁은 이미 구글API를 이용하여 나눔고딕을 사용하는 분에게 해당됩니다.(나눔고딕외의 웹폰트도 상관없음)

에디터 작성화면에서 지정한 폰트로 나오지 않는 문제를 해결합니다.



0. 서론



요즘 웹에서 나눔고딕을 많이 사용합니다.


저 또한 그렇습니다.


웹사이트 기본 글꼴은 물론 게시글 본문까지,... 모든 폰트를 나눔고딕을 이용하고 있는데요.


사용을 하다보니 (몰랐지만) 나눔고딕이 설치되어 있지 않은 PC의 경우


에디터에서는 나눔고딕이 적용되지 않는 것을 확인하였습니다.


물론 작성 완료 후에는 정상적으로 적용이 되지요..


그래서 열심히 에디터를 뜯어봤습니다.(말은 거창하지만 그냥.. 훑어봤습니다.)


레이아웃에 기본적으로.. 구글 api 코드가 있지만..


반영이 안되길래


에디터 모듈 css에서 구글 api 코드를 추가해보기도 하고..


스킨에서도 추가해보기도 하고...



그리고 결국 성공했습니다.


구글 API 코드는........



1. 본문(Tip)



바로 스타일에서 적용해줘야 합니다.


보통 기본적으로 default 스타일을 사용하실 텐데..


경로가


xe/modules/editor/styles/default/editor.css


파일을 열어서


1번째줄 바로 밑에

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);


이거 한 줄을 추가해주시구요...(나눔고딕입니다.)


tip0.png




XE 관리자 > 고급 > 에디터에서


본문 글꼴이 있는데


사용자 설정 부분에 아래와 같이 입력합니다.


Nanum Gothic,sans-serif


tip1.png


※ 왜 sans-serif를 추가하나요?

추가안해도 됩니다만~
만약 Nanum Gothic이라는 폰트를 사용하지 못할 때나 해당 문자가 해당 폰트에 없을 때 그 다음 폰트를 사용하게 됩니다.


ex) Nanum Gothic, dotum
위와 같이 하게되면 나눔고딕을 사용할 수 없거나, 해당 문자가 나눔고딕에 없으면 그 다음으로 지정한
돋움체를 적용하게 됩니다.


만일 나눔고딕만 적용하게 된다면 나눔고딕을 사용할 수 없거나, 해당 문자가 나눔고딕에 없을 경우
기본글꼴 (윈도우즈의 경우 굴림)이 적용됩니다.

브라우저마다 차이가 있을 수 있습니다.

ps. sans-serif를 적용한 이유는 구글폰트api에서 사용 예제 그대로 쓴 겁니다.







자 모든 설정은 끝났습니다.


이제  에디터를 이용하시면 됩니다.


정상적으로 설정이 완료되면 아래처럼 기본 글꼴이 나눔고딕이 적용됩니다.


2. 결과



tip3.png





마지막으로 나눔고딕이 설치되어 있지 않은 상태를 증명하는 스크린샷입니다.

나눔 고딕이 없어도 위와 같이 정상적으로 잘나오고 있지요.


tip4.png






3. 한줄요약



에디터 화면에서 원하는 웹폰트를 적용하려면 에디터 스타일에 적용해야 한다.








anz.png

제목 글쓴이 날짜
[javascript] 기초강좌 | 03 논리연산자, 비트, 삼항연산자, 기타연산자 hiwebs 2014.07.02
[10원팁] 서버에 계정추가후 새로설치하는데 CSS가 깨진다? [3] 키스미베이베 2014.02.27
회원가입시 닉네임 특수문자 제한하기 [10] 절망린 2009.06.06
[nginx] Rewrite 예외 설정 okiz 2014.06.30
관리자 비밀번호 분실시 phpmyadmin을 이용하여 재설정하는 방법 [6] elancer 2014.03.11
BlogAPI 활용하기 file 맞장 2014.06.29
min.js min.css 정리해서 보기 Happyphp 2014.06.26
부트스트랩 css 팁 [3] 돼지코구뇽 2014.04.05
추천과 추천포인트 관련 팁 [8] 고진감래 2009.09.30
관리자가 글 쓸때는 분류를 선택 안 해도 등록되도록 (공지글을 쓸때를 위해) 개선 [2] sejin7940 2014.06.21
템플릿 파일에서 일반 PHP 코드 사용 [3] 화니군 2007.08.28
XE에서 신디케이션 제거하기 [1] mAKEkr 2014.06.20
에디터에서 나눔고딕 웹폰트, 기본글꼴로 적용하기(구글API이용) [6] file 애니즌 2014.06.06
관리자페이지에서 콘텐츠->파일 에서 등록된 파일 전체 리스트에 이미지가 바로 나타나도록 [2] sejin7940 2014.06.19
Apache .htaccess 작성요령 [10] 컴매냐 2013.09.19
목록에서 이미지 팝업 이용하기 Happyphp 2014.06.19
include용 파일에는 닫는 php문이 없다? file YJSoft 2014.04.14
레이아웃에 배경이미지 업로드 하고 적용시키기 [1] 웹빌드ver2 2014.06.10
Windows 서버에서 XE 속도 대폭 개선 방법 [29] StyleRoot 2013.02.25
Google Public DNS 강제 Flush Cache 하기 AJKJ 2014.06.08