Rails6에서 사용자 정의 글꼴을 사용하는 방법

소개

Rails5에서는 간단하게 커스텀 폰트를 추가할 수 있었습니다만, Rails6로 추가하는데 어색했으므로, 제가 실제로 시도한 방법을 간단하게 소개합니다.

환경

Ruby 3.0.1
Rails 6.1.3.1

① 사용자 정의 글꼴 배치

먼저 사용자 정의 글꼴을 GoogleFonts

※ /app/assets/fonts 폴더가 없는 경우는 /app/assets/fonts 안에 /app/assets/ 폴더를 작성해 주십시오.

② application.css 편집

fonts 에 커스텀 폰트의 정보를 기술해 갑니다.

application.css

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

@font-face {
    font-family: "NotoSansJP";
    font-style: normal;
    src: asset_url('NotoSansJP-Regular.otf') ;
}

application.css 그대로 Rails 가 커스텀 폰트를 인식하지 않기 때문에 .css 로 확장자를 변경합니다.

Rails6부터는 .scss 내의 /app/assets/stylesheets 파일 확장자가 application 로 생성되게 된 것 같습니다.

③ assets:precompile 실행

명령에서 .css를 실행하여 변경 사항을 반영합니다.

rails assets:precompile

무사히 반영이 되어 있으면, 명령의 결과에 컴파일 된 커스텀 폰트의 파일명이 표시됩니다.

마지막으로

커스텀 폰트의 반영을 할 수 없어, 인터넷으로 조사했습니다만, Rails6의 정보가 적게 해결하지 않았습니다.
커스텀 폰트가 컴파일 되지 않았기 때문에, 파일을 조사하고 있으면, rails assets:precompile 파일의 확장자가 application인 것을 깨닫고 .css (으)로 변경했는데 잘 반영할 수 있었습니다.
이 사건에 시달리고 있던 분의 도움이 되면 다행입니다.
이상, Rails6에서 커스텀 폰트를 사용하는 방법의 소개였습니다.