웹사이트 폰트를 바꿔보자

 

웹사이트를 방문하면 스타일 시트의 지정 폰트가 적용되어 있다.

특히 영문사이트의 경우에 국문으로 변경하면 국문 지원이 미흡해서 굴림 또는 그냥 고딕 형태로 렌더링 된다. 따라서 시각적으로 미려하지 않을 수 있다.

 

이건 어디까지나 개인적인 취향이지만 나눔 고딕의 경우 굴림과 매우 흡사해서 개인적으로 그다지 좋아하는 폰트는 아니다.

그렇다고 계속 쓰자니 불만이고해서 변경하면 어떨까 싶어 인터넷 검색을 해보니 Stylus라는 크롬 익스텐션을 찾았다. 설정 방법도 CSS를 조금이라도 할 줄 알면 누구나 쉽게 사용가능하다.

 

크롬 브라우저의 확장프로그램 스토어에 가서 Stylus를 검색한다.

 

나는 이미 설치를 했기때문에 설치됨으로 뜬다.

선택해서 설치해주면 브라우저 우측 상단의 퍼즐 모양의 아이콘 옆이나 자동으로 익스텐션 영역에 Stylus가 보일 것이다.

저 S자 모양을 클릭해 주면,

 

요렇게 보이는데 좌측 아래 'Manage'를 클릭해 준다.

그리고 새로운 스타일을 추가해 준다.

 

중간 Actions 쯤에 보이는 Write new style를 클릭해서 스타일을 작성해 준다.

예를 들면 다음과 같이.

 

스타일 이름을 지정해 주고,

우측 코드작성 에디터에는 웹폰트라 @import를 해주고 모든 것을 나타내는 '*'의 font-family를 지정해 주면 된다. 

강력하게 원하는 폰트로 설정하기 위해서는 important를 정해주면 좋은데 가끔 유니코드나 문자열 아이콘 같은 경우에는 엑박이나 이상한 모양이 나오므로 나는! important를 뺐다. 

 

각 폰트별 웹폰트 지정은 또 검색하면 쉽게 찾을 수 있다.

 

이렇게 하고도 지정된 폰트가 그대로 나오는 사이트가 있는데 보통 구글이나 일부 적용되는 사이트는 강력하게! important가 적용된 경우라 원하는 대로 우측 코드에! important를 추가하면 된다.

 

 

그리고 사이트마다 별도로 지정을 할 수도 있다.

예를 들어 지금처럼 tistory에 지정하는 폰트를 별도 설정하기 위해서 마우스를 Write style for 아래 주소 부분에 대면 시작하는 URL, 또는 도메인별... 등으로 지정하고 아까 코드 작성처럼 동일한 에디터가 뜨는데 여기에 똑같이 작성해서 사용하면 된다.

 

 

이렇게.

적용 전

적용 후

 

그런데 이렇게 강제로 원하는 폰트를 적용하기가 조금 애매한 사이트가 있다.

Microsoft, Google같은 경우 일부 페이지는 위에 설명한 문자열 이모지나 일부가 깨지는 경우가 있다.