Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 CSS가 어려운 이유 — 프로젝트 중심 실전 CSS 강의 소개 2023-04-13
📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12
📌 [번역] CSS 코드 냄새 2013-01-01

폰트가 설치돼 있는지 확인해 주는 javascript

npm

has-font라는 npm 패키지를 사용하면 된다. webpack 없이도 사용할 수 있다. 설명 페이지 참고.

jQuery 의존

사용법: jquery.font.js

사실 간단하다.

일단 jquery 사이트에서 jquery를 다운로드한다.

(min 또는 mini가 붙은 것은 공백 따위를 모두 없애서 용량을 정말 최소한으로 만든 것이다. 없는 것은 사람이 알아볼 수 있는 형태로 코드가 정리돼 있다. 줄바꿈, 들여쓰기 등으로 말이다.)

다음, jquery.font.js를 다운로드한다.(여기서 jquery.font.mini.js를 다운받아도 되고, jquery.font.js를 받아도 된다. 클릭하면 소스를 보게 되니, 오른쪽 클릭해서 다른 이름으로 저장하시라.)

둘 다 script로 페이지에 집어넣고(뭐, 굳이 이런 것까지 설명해야 하나 싶지만;;)

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.font.mini.js"></script>

아래 메서드를 사용하면 true나 false를 반환해 준다.

$.font.test('맑은 고딕')

그러니까, 아래와 같은 형태로 활용하면 된다.

if($.font.test('맑은 고딕'))

사용법 : font.js

이것도 사용법이 아주 간단하다. 위처럼 script 태그로 자기 페이지에 집어넣고,

<script type="text/javascript" src="font.js"></script></code>

font.setup() 메서드로 세팅을 한다.

근데 이 setup() 메서드는 페이지가 모두 로드된 다음(정확히 말하면 DOM을 모두 불러온 다음)에 사용해야 하는 것 같다.

따라서 jquery가 제공하는 다음 메서드를 사용하면 좋다.

$(document).ready(function () {
  font.setup(); // run setup when the DOM is ready
});

혹은 아래처럼 해도 이미지를 제외한 페이지를 모두 로딩하면 자바스크립트를 실행한다. (이게 더 편하다.)

$(function () {
  font.setup(); // run setup when the DOM is ready
});

그리고 나서

font.isInstalled('맑은 고딕'); // returns true or false

이렇게 메서드를 사용하면 된다.

그러면 true나 false를 반환해 준다.

그럼 이만.


(2022년 9월 2일에 npm, jQuery 의존 부분을 추가했다.)

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

댓글 (2개)

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다