Fonts

You can easily customize the font used in ConnectKit to more closely match the look and feel of your app.

If you're looking to customize the connect button, check out Custom Connect Button.

Example

To change the font, provide a customTheme prop to your <ConnectKitProvider />.

This example sets the font to Comic Sans:

<ConnectKitProvider
  customTheme={{
    "--ck-font-family": '"Comic Sans MS", "Comic Sans", cursive',
  }}
>
  {/* Your App */}
</ConnectKitProvider>

That's it—the custom theme prop now extends the default theme to support your custom font.

Here it is in action:

Google Fonts

If you'd like, it's also possible to use any custom font from a font provider such as Google Fonts (works for other font providers as well).

Example

First, start by including some font assets from Google Fonts by copying in the following html into <head> (other font providers have similar html code). In this example, we'll use IBM Plex Serif:

,_head.html<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@300&display=swap"
  rel="stylesheet"
/>

To use IBM Plex Serif in ConnectKit, provide a customTheme prop to your <ConnectKitProvider /> like following:

<ConnectKitProvider
  customTheme={{
    "--ck-font-family": "IBM Plex Serif",
  }}
>
  {/* Your App */}
</ConnectKitProvider>

That's it—the custom theme prop now extends the default theme to support the font loaded from Google Fonts.

Here it is in action:

Fonts

Example

Google Fonts

Example

On this page