[Mendix] 프로젝트 Base Font 설정

1. Google Font 파일 다운로드

https://fonts.google.com/

Browse Fonts - Google Fonts

Google Font는 구글에서 제공하는 무료 폰트 사이트로 저작권에 문제없이 사용할 수 있는 무료 폰트들이 많이 있다.

해당 사이트에서 마음에 드는 폰트를 골라 다운로드 한다.

 

2. 폰트를 적용할 css파일 만들기

다운로드 받은 폰트 파일을 하나로 묶어 사용할 수 있도록 같은 파일 위치에 스타일시트 파일(CSS)로 만들어 준다.

 

css파일 예)

 

font-family : 적용시킬 폰트 명

font-weight : 폰트 굵기

src : 폰트 파일의 경로 및 format Type지정

(format type  : ttf - truetype, otf - opentype, woff - woff, woff2 - woff2 등..)

 

3. Mendix 프로젝트 파일 경로에 Font파일 넣기

프로젝트 App 디렉토리 > theme > web > fonts 폴더 아래에 생성한 폰트 폴더 및 파일을 옮긴다.

theme > web > fonts

 

Mendix 프로젝트를 Run 시키면 프로젝트 App 디렉토리 > deployment > web > fonts 폴더 아래 옮긴 폴더들이 생성 된다.

deployment > web > fonts

 

Studio pro에 돌아와 생성된 폰트 폴더를 확인 해 보면 아래 이미지 경로에 css파일이 생성된 것을 확인할 수 있다.

 

생성된 파일은 custom-variables.scss파일을 수정하여 기본 폰트 적용 시킬 수 있다.

 

4. 프로젝트 Base Font 설정

custom-variables.scss 파일을 열어보면 Mendix App이 생성될 때 초기 템플릿을 구성한 scss명령어로 선언된 여러 함수들을 확인할 수 있다. 선언된 함수들은 수정하여 커스텀으로 스타일링 해 줄수 있다.

custom-variables.scss

 

위 캡처 화면은 custom-variables.scss파일의 한 영역이다.

ADVENCED라고 주석처리 된 부분 밑에 $font-family-import, $font-family-base에 css파일 경로 및 설정한 폰트 이름을 입력하고 프로젝트를 실행하면 화면의 폰트가 바뀐것을 확인 할 수 있다.

폰트 스타일이 적용된 Mendix 메인화면