드루팔 (drupal)로 만든 블로그에서 폰트 변경하는 방법

에 의해 backchur, 3 2월, 2024

안녕하세요~ 무료 프로그램을 소개하는 블로그 베이스온사이트 입니다.

이번 글에서는 워드프레스를 대체할 무료 CMS 프로그램인

드루팔 (drupal) 에서 확장 프로그램을 설치하는 방법

에 대해 알려드리려고 합니다.

워드프레스 대체 프로그램 드루팔(drupal)

드루팔은 PHP 서버에서 동작하고 GNU 라이선스에 따라 무료로 배포되는 오픈 소스 관리 시스템 입니다. 무료 오픈 소스 프로그램이여서 비용 걱정을 할 필요가 없으며 개인 블로그부터 기업, 정치, 정부 사이트에 이르기까지 전 세계 상위 10,000개 웹사이트 중 최소 14%를 차지하고 있습니다.

그런데 유난히, 한국에서는 워드프레스의 인기에 밀려 이와 관련된 사용방법을 찾기가 어렵습니다. 그래서 드루팔로 개인 블로그를 만들려고 할 때, SEO 작업이나 구글 애널리틱스 연결이 필요한 경우가 많은데 이럴 때 확장 프로그램을 설치해야 합니다.

드루팔 확장 프로그램 설치하는 방법

관리자 계정으로 먼저 로그인이 필요합니다. 기본 사이트를 잘 찾아 보시면 다음과 같이 로그인 하는 곳이 있습니다.
로그인은 드루팔을 설치할 때 지정한 관리자 계정이여야 합니다. 기억이 안나실 경우, 설정했던 이메일로 재설정 이메일이 간다고 하는데 안가는 경우도 있으니 그럴 경우는 재설치를 진행해 주세요.
로그인을 한 뒤, 좌측의 관리 -> 확장 메뉴로 들어갑니다.
그러면 다음과 같이 확장 프로그램을 관리할 수 있는 페이지가 등장 합니다. 여기서 add new module을 클릭해 주세요. 이 페이지는 잠시 두고 브라우저에서 새 창을 열어주셔야 합니다.
5. 새창에서 드루팔에 설치할 확장 프로그램, 즉 모듈을 받으려면 아래 주소에서 검색해 주셔야 합니다. 표시된 부분에 font-face 라고 입력하고 검색을 진행합니다.
https://www.drupal.org/project/project_module
검색 결과로 맨 위에 있는 @font-your-face를 클릭해 다음 페이지로 넘어갑니다. 넘어간 페이지에서 스크롤을 내려보면 Release 라는 영역이 있는데 이곳에서 확장 파일을 다운로드 받을 수 있습니다. 버전번호 를 클릭하세요.
반드시 tar.gz 파일을 다운받으셔야 합니다. 윈도우나 리눅스 , macos 관계없이 해당 링크를 클릭해 파일을 다운 받아 주세요.

원래 드루팔은 composer 라고 해서 PHP 전용 설치 환경에서 실행하는 것을 권장하고 있습니다. 하지만 카페 24 같은 웹호스팅 환경에서는 composer를 설치 할 수 없기 때문에 이같이 다운 받고 업로드 하는 방식을 사용해야 합니다.

다시 내 블로그로 돌아와 파일 선택을 누르고 다운 받은 파일을 선택하시면 됩니다. 계속 을 클릭한 뒤 잠시 기다리면 업로드가 완료됩니다.
업로드가 완료되었으면 확장 프로그램 관리로 돌아오게 됩니다. 여기서 스크롤을 내리면 아까 설치한 font-face 확장이 보이는데 여기서 1번째 것과 ~ - Local Fonts 부분만을 체크하고 스크롤을 끝까지 더 내려서 설치하기를 눌러주세요.
상단의 확장 탭 옆의 모양 으로 들어가시면 다음과 같이 새로운 메뉴가 생긴 것을 확인할 수 있습니다. @font-your-face 안의 Custom Fonts 로 이동하고 Add Custom Font 를 클릭해 주세요.
여기서 font 를 설정해야 합니다. 각 항목에 내용은 아래와 같이 채워주세요. (작성자는 무료로 사용가능한 pretendard 폰트를 가지고 설정을 진행하였습니다.)

레이블 : 폰트의 종류(예를 들어 나눔 고딕 Light 라면 NanumGothic 만)명을 지정합니다. 반드시 영어 소문자여야 합니다.

font-family: 폰트를 지칭할 이름을 지정해 주세요. 굵기만 다른 같은 폰트 라더라도 이름을 다르게 하시는 것이 좋습니다. (예로 프리텐다드 Light를 업로드 한다면 pretendard_light 라고 입력해 주세요.)

Font-style: 보통으로 기본 설정하시면 됩니다. 만약 이탤릭 체가 기본이라면 바꾸어 주세요.

Font-Weight: 이름을 다르게 하면 어차피 큰 의미가 없지만 다운로드 받은 폰트 파일에 기본적으로 100,200,300 으로 시작해서 800,900 으로 끝나는 경우가 있습니다. 기본 크기에 맞추어서 설정해 주세요. (프리텐다드 Light 의 경우 200으로 설정)

Font-Classification: 이것은 만약 폰트 파일을 못 불러올 때 기본으로 불러올 폰트의 타입을 설정합니다. 제가 추가한 프리텐다드는 고딕체 이므로 Sans Serif 로 설정하였습니다.

Font File : 마지막으로 woff 파일을 추가해 주시면 됩니다. (드루팔에서는 유일하게 woff 형태의 폰트 파일만 지원합니다. 만약 ttf 라면 변환한 뒤 업로드 해 주세요.)

설정 후 저장 버튼을 누르면 업로드가 완료됩니다.

업로드 한 폰트를 테마에 지정하기 위해서는 바로 옆 탭의 Font display -> Add Font display를 클릭합니다.
레이블은 위와 동일하게 , 글꼴은 드롭다운 메뉴에서 업로드한 폰트를 선택해 주세요.
Preset Selectors 는 어떤 텍스트 종류에 해당 폰트를 적용할 것 인지를 설정할 수 있습니다. 등록한 폰트는 얇은 고딕체 이기 때문에 본문에 어울릴 것으로 생각하여 standard text 로 지정하였습니다. (제목 폰트를 따로 지정하려면 굵은 폰트를 다시 한번 올리고 All Headers 를 선택해 주세요.)
테마를 현재 사용하고 있는 것(Olivero)으로 선택하고 저장을 누르면 모든 설정이 완료되고 이제 사이트에 표시되는 텍스트가 전부 바뀌게 됩니다.