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개의 좋아요

This Fantastic! Can this be installed Multiple Times to link to different themes by changing it’s Name in Advanced install?

I don’t see why not. We’ve installed the same theme twice, for example here on Meta to have both a light and dark version.

3개의 좋아요

Thanks. Forgot you can rename it to identify/link it to other themes.

1개의 좋아요

Thank you. I love it. :grin:

3개의 좋아요

Thanks :heart: I really love it.

I just discovered that this component does not work for /pub/ (published) pages. The fonts are not loading on these pages resulting in a default Times New Roman alike font.

1개의 좋아요

I’m seeing default fonts as well, but on the

https://yoursite.org/u/activate-account/... activate account page

I tried and this is indeed an issue.

The published page tries to load the google font through the theme component:

image

The font file not being loaded on the published page, it doesn’t fall back to the font-family variable `Arial, sans-serif and uses Times New Roman instead.

There may be room for improvement here as long as the published pages can access the modifications required.

1개의 좋아요

To be honest ever since this discovery I define my fonts in custom CSS. Works great.

2개의 좋아요

That’s awesome, thank you and your team for developing such a convenient feature ^^. I will recommend it to people I know who are using discourse to build user communities.

Quick bug report: I just noticed when I set the font weight then bold text doesn’t show up as bold.

I tested this with the fonts Work Sans and Zilla Slab. I changed the font weight from the default (400) to 300. When I did this bold text did not appear bold. Reset that setting and the bold text reappears.

I set it to 400 and called it a day, but wanted to let you know.

Thanks for your work on this!

Any way to get into the nitty gritty a little more? The “Headline” font is coming up as 900 weight by default with Headers inside of Topics. Would be great to set the defaults for each of those Markdown objects.

1개의 좋아요

There seems to be a bug with this, at least on my forum, if I add the font “Inter” with this component then the following happens:

  • Start editing or composing a message
  • Switch apps to something else while composer is open
  • Come back, and the zoom is all wrong, like it’s too far zoomed in
  • There will also be bugs with Chat and with scrolling now

Not sure if it happens with other fonts, but it happens 100% of the time if I add this component to any theme.

Is this a known bug? Is there a fix?

Thanks

2개의 좋아요

We have Inter already built-in if you want to change the Base font and Heading font under admin > site settings, no component necessary

2개의 좋아요

Which version of Discourse? Am on 3.3 stable and don’t see Inter. Having the same problems as some of the users here with this component.

I am on 3.3 and want to use Inter. While the font loads, BOLD text isn’t bold.

You’ll need to update to 3.4 for the built-in Inter option

2개의 좋아요

I’ve just merged a refactor of this component that better aligns with Google Font updates — this should fix some issues people were having with different weights not appearing.

Note that the setting formatting changed slightly so that weights can no longer be included in the font name setting like Roboto:300,300i,500, and this would have to be updated to a simple Roboto… but it should migrate automatically on update.

2개의 좋아요