본문 바로가기
카테고리 없음

[워드프레스] 웹사이트 폰트 한번에 변경하기 & 변하지 않는 폰트는 따로 변경하는 방법

by rovertlee 2021. 11. 9.

워드프레스로 웹사이트를 만들다보면 템플릿에 있는 폰트로 변경되어 보기 싫은 경우가 있다

이건 한글화가 되어 있지 않은 템플릿을 활용할 때 자주 나타나는 현상인데

이 문제를 해결하기 위한 방법은 다음과 같다

 

1. 웹사이트의 모든 폰트를 CSS로 지정하여 바꿔준다

2. 1번 항목 적용 후 바뀌지 않은 폰트는 해당 영역을 지정하여 폰트를 수정한다

 

※ 웹사이트의 모든 폰트를 CSS로 지정하여 바꿔주는 방법 (구글 Noto Sans 기준)

 

아래 순서대로 화면을 진입하여 수정한다

 

대시보드 첫 화면에서 사용자 정의하기 진입
사용자 정의하기에서 "추가 CSS" 클릭

 

"추가 CSS" 클릭 시 화면

여기서 위 이미지 내 공백 부분에 아래 코드를 삽입한다

*{
	font-family: 'Noto Sans KR', sans-serif;
}

 

코드를 삽입한 결과

이제 "공개" 버튼을 누르고 적용한다

그럼 1번 사항이 적용 완료된다

 

※ 1번 항목 적용 후 바뀌지 않은 폰트는 해당 영역을 지정하여 폰트를 수정하는 방법 (구글 Noto Sans 기준)

 

1. 크롬 브라우저 내 F12를 눌러서 개발자모드를 진입한다

2. 상단 화살표를 눌러서 어떤 부분을 수정하고 싶은지 다시 클릭해본다

3. 해당 영역의 위치를 불러오기 위해 스타일 가이드에서 "font-family"를 검색한다

4. 가장 상단에 나오는 스타일 묶음 영역을 모두 복사해서 메모장에 넣는다

5. 메모장에서 가장 마지막 부분에 중괄호를 넣고 "font-family: 'Noto Sans KR', sans-serif;"를 넣어준다

6. 작성한 부분을 "사용자 정의 - 추가 CSS"로 진입해서 붙여 넣어준다

7. "공개" 버튼 클릭하면 완료

 

위 순서를 이미지로 표현하면 다음과 같다

 

아직 아무것도 하지 않은 페이지
개발자 도구에 진입한 화면
개발자 도구에서 유용하게 쓰이는 "화살표"
화살표를 누르고 바꾸고 싶은 영역을 클릭하면 다음과 같은 액션이 활성화된다
개발자 도구 오른쪽 하단을 보면 어떤 폰트가 적용되어 있는지 알 수 있다
스타일 선택 도구에서 "font-f"까지만 검색하고 가장 상단에 뜨는 CSS 코드를 복사한다
빨간색 상자 안에 있는 것이 복사할 부분
이제 메모장을 열어서 복사한 내용을 붙여넣고, 중괄호를 만들어준다

 

중괄호 안에 적용할 폰트 소스를 넣어주고 전체 내용을 복사한다
사용자 정의하기 - 추가 CSS에 진입해서 빨간색 공간에 복사한 내용을 삽입하고 "공개"를 눌러서 적용한다

 

댓글