Powered by

A design system from Family

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:

,
_app.jsx
1const App = () => {
2 return (
3 <WagmiConfig client={client}>
4 <ConnectKitProvider
5 customTheme={{
6 "--ck-font-family": '"Comic Sans MS", "Comic Sans", cursive',
7 }}
8 >
9 {/* Your App */}
10 <ConnectKitButton />
11 </ConnectKitProvider>
12 </WagmiConfig>
13 );
14};

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
1<link rel="preconnect" href="https://fonts.googleapis.com" />
2<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
3<link
4 href="https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@300&display=swap"
5 rel="stylesheet"
6/>

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

,
_app.jsx
1const App = () => {
2 return (
3 <WagmiConfig client={client}>
4 <ConnectKitProvider
5 customTheme={{
6 "--ck-font-family": "IBM Plex Serif",
7 }}
8 >
9 {/* Your App */}
10 <ConnectKitButton />
11 </ConnectKitProvider>
12 </WagmiConfig>
13 );
14};

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: