Google Fonts

:discourse2: 요약 Google Fonts는 CSS를 작성하지 않고 Google Fonts에서 서체를 추가할 수 있는 간단한 테마 컴포넌트입니다.
:eyeglasses: 미리보기 Discourse Theme Creator에서 미리보기
:hammer_and_wrench: 레포지토리 링크 https://github.com/discourse/discourse-google-font-component
:open_book: Discourse 테마를 처음 사용하시나요? Discourse 테마 사용 입문가이드

이 테마 컴포넌트 설치

기능

이 컴포넌트를 사용하면 사이트의 기본 서체를 설정하고, 헤드라인 및 등폭 텍스트(코드 블록)용 서체를 선택적으로 별도로 지정할 수 있습니다. 각 경우에서 서체 굵기를 선택하고 서체 크기를 늘릴 수도 있습니다.

백엔드에서는 Google의 폰트 <link>와 함께 일부 CSS를 설정합니다. 이는 https://fonts.googleapis.com/에서 Google이 폰트 파일을 서빙하는 데 의존한다는 점을 유의하세요.

설정

이름 설명
fonts fonts.google.com에서 사용하려는 서체 이름을 추가하세요. 서체 이름은 대소문자를 구분합니다!
body font Discourse 전체에서 사용되는 기본 서체로, 위의 “fonts” 설정에 포함되어야 합니다.
body font weight 100-900 범위의 서체 두께. 400은 보통, 700은 굵게입니다.
headline font 헤드라인용 선택적 서체로, 위의 “fonts” 설정에 포함되어야 합니다.
headline font weight 100-900 범위의 서체 두께. 400은 보통, 700은 굵게입니다.
monospaced font 코드 블록용 선택적 서체로, 위의 “fonts” 설정에 포함되어야 합니다.
monospaced font weight 100-900 범위의 서체 두께. 400은 보통, 700은 굵게입니다.
normal font size 모든 사용자의 기본 서체 크기. 이 값을 조정하면 모든 서체 크기가 비례하여 조정됩니다.
smaller font size 각 사용자의 인터페이스 환경 설정에서 선택 가능
larger font size 각 사용자의 인터페이스 환경 설정에서 선택 가능
largest font size 각 사용자의 인터페이스 환경 설정에서 선택 가능

:discourse2: 우리가 호스팅하고 있나요? 테마 컴포넌트는 Standard, Business, Enterprise 플랜에서 사용 가능합니다.

51개의 좋아요

정말 훌륭합니다! 고급 설치에서 이름을 변경하여 다른 테마에 연결하도록 여러 번 설치할 수 있나요?

왜 안 된다는 건지 모르겠어요. 예를 들어 여기 메타에서는 라이트 버전과 다크 버전을 모두 사용할 수 있도록 같은 테마를 두 번 설치해 두었거든요.

3개의 좋아요

감사합니다. 다른 테마와 식별/연결할 수 있도록 이름을 변경할 수 있다는 걸 잊고 있었네요.

1개의 좋아요

고마워요. 정말 좋아해요. :grin:

3개의 좋아요

고마워요 :heart: 정말 좋아요.

이 컴포넌트가 /pub/ (게시된) 페이지에서 작동하지 않는다는 것을 방금 발견했습니다. 이 페이지에서 폰트가 로드되지 않아 기본 Times New Roman 계열의 폰트가 표시됩니다.

1개의 좋아요

기본 폰트도 확인되는데,

https://yoursite.org/u/activate-account/... 계정 활성화 페이지에서 그런 현상이 나타납니다.

직접 시도해 보았는데, 실제로 문제가 있습니다.

게시된 페이지가 테마 컴포넌트를 통해 구글 폰트를 로드하려고 합니다:

image

게시된 페이지에서 폰트 파일이 로드되지 않아서, Arial, sans-serif라는 font-family 변수로 폴백되지 않고 대신 Times New Roman이 사용됩니다.

게시된 페이지에서 필요한 수정 사항을 접근할 수 있다면, 이 부분은 개선할 여지가 있을 수 있습니다.

1개의 좋아요

솔직히 이 발견 이후로는 커스텀 CSS에서 직접 폰트를 정의하고 있습니다. 아주 잘 작동합니다.

2개의 좋아요

정말 멋진 기능입니다. 이렇게 편리한 기능을 개발해 주셔서 팀 여러분께 감사드립니다 ^^. 디스코스를 이용해 사용자 커뮤니티를 구축하는 지인들에게 추천해 보겠습니다.

간단한 버그 리포트: 글꼴 굵기를 설정하면 볼드 텍스트가 볼드로 표시되지 않는 것을 방금 확인했습니다.

Work Sans와 Zilla Slab 글꼴로 테스트해 보았습니다. 글꼴 굵기를 기본값(400)에서 300으로 변경했는데, 이 경우 볼드 텍스트가 볼드로 표시되지 않았습니다. 해당 설정을 되돌리면 볼드 텍스트가 다시 표시됩니다.

결국 400으로 설정하고 마무리했지만, 이 문제를 공유해 드리고 싶었습니다.

수고 많으십니다!

좀 더 세부적인 내용을 다룰 수 있는 방법이 있을까요? “Headline” 폰트는 기본적으로 주제 내의 헤더에서 900 굵기로 표시됩니다. 각 마크다운 객체에 대해 기본값을 설정할 수 있으면 좋겠습니다.

1개의 좋아요

이 기능에 버그가 있는 것 같습니다. 적어도 제 포럼에서는 이 컴포넌트로 ‘Inter’ 폰트를 추가하면 다음과 같은 문제가 발생합니다:

  • 메시지 편집 또는 작성을 시작합니다.
  • 작성기가 열려 있는 상태에서 다른 앱으로 전환합니다.
  • 다시 돌아오면 줌이 엉망이 되어 지나치게 확대된 것처럼 보입니다.
  • 채팅과 스크롤링에도 버그가 발생합니다.

다른 폰트에서도 발생하는지 확실하지는 않지만, 이 컴포넌트를 어떤 테마에 추가하든 100% 재현됩니다.

알려진 버그인가요? 해결 방법이 있을까요?

감사합니다

2개의 좋아요

관리자 > 사이트 설정에서 기본 글꼴과 제목 글꼴을 변경하려면 컴포넌트가 필요 없이 이미 내장된 Inter를 사용할 수 있습니다.

2개의 좋아요

어떤 버전의 Discourse를 사용 중이신가요? 저는 3.3 stable 버전을 사용 중인데 Inter 폰트를 찾지 못하겠습니다. 이 컴포넌트와 관련하여 이 곳의 다른 사용자들과 동일한 문제를 겪고 있습니다.

저도 3.3 버전을 사용 중이며 Inter 폰트를 사용하고 싶습니다. 폰트가 로드되는 동안 굵은(BOLD) 텍스트가 굵게 표시되지 않습니다.

내장된 Inter 옵션을 사용하려면 3.4로 업데이트해야 합니다.

2개의 좋아요

해당 컴포넌트의 리팩토링을 병합했습니다. 이번 변경으로 Google Fonts 업데이트에 더 잘 맞도록 개선했으며, 이전에 여러 웨이트가 표시되지 않던 문제들이 해결될 것으로 보입니다.

참고로, 설정 형식이 약간 변경되어 이제 폰트 이름 설정에 웨이트를 포함할 수 없습니다(예: Roboto:300,300i,500). 이를 단순히 Roboto로 업데이트해야 합니다… 단, 업데이트 시 자동으로 마이그레이션됩니다.

2개의 좋아요