Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account

Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

GeneratePress GenerateBlocks

How to add custom font?

YEAR93
February 7, 2024 at 3:38 pm

Hello,

I want to add a custom font that I’ve developed to my theme. I’ve read this article https://docs.generatepress.com/article/adding-local-fonts/, but it seems to be specifically for local Google Fonts.

Could you please guide me on how to add my custom font so that I can select it from the customizer panel -> typography?
Fernando
February 7, 2024 at 5:22 pm
Hi there,

That article should still apply. The only difference is you would need to create your own @font-face rules.
Here is an article that may assist you: https://css-tricks.com/snippets/css/using-font-face-in-css/#aa-deepest-possible-browser-support

Also see: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

Example, if you set the @font-face rule as such:
```
@font-face {
  font-family: "trickster-test";
  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
}
```
Then, you need to type trickster-test as the font manually in the Typography module.

You can also add it to the dropdowns with these two filters:

Generateblocks font filter: https://generate.support/topic/custom-font-dropdown-gb/#post-30043:~:text=Yes%2C%20you%20can%20do%20this%3A
GP font filter: https://generate.support/topic/removing-fonts-from-font-family-dropdown/#post-22123

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.