# Typography

## Open Typography settings. <a href="#open-google-fonts-settings" id="open-google-fonts-settings"></a>

1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. In the left-hand toolbar, click **Theme settings.**
4. Click **Typography** ( in version tf-3.2 or older, the group name is **Google fonts )**.

## For version tf-3.3 or newer <a href="#find-and-select-fonts-you-want" id="find-and-select-fonts-you-want"></a>

Use font pickers to change the Primary and secondary fonts.

![](https://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MZk7oSpt4JdIQ2sUd1P%2F-MZkACLDuOB9DTNhQB5k%2Ftypography-settings.png?alt=media\&token=fcd68e84-1ce9-4d10-97f0-78b779533955)

## For version tf-3.2 or older <a href="#find-and-select-fonts-you-want" id="find-and-select-fonts-you-want"></a>

* Go to [https://fonts.google.com](https://fonts.google.com/), click the font you want to use. Recommend only select at most 2 fonts for optimizing the loading time.

![](https://gblobscdn.gitbook.com/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHC-UopSSs83jB5pshF%2F-MHC6hvLGvWdArCVMGAz%2Ftheme-settings-google-fonts-select.jpeg?alt=media\&token=8884bcf1-806b-4dc2-a327-2fe6fe8a7435)

* In each font, select styles you want to use. Recommend Regular(300 or 400), and Semi-bold(600).

![](https://gblobscdn.gitbook.com/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHC-UopSSs83jB5pshF%2F-MHC7asEc8aDEN0nZjcd%2Ftheme-settings-google-fonts-select-styles.jpeg?alt=media\&token=f70c343d-25f8-4e6d-99ea-5e4fcd11b0d2)

* Then click the icon on the top right to open the right panel. And click "**Embed**" in the right panel to open the embed configuration.

![](https://gblobscdn.gitbook.com/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHC-UopSSs83jB5pshF%2F-MHC8gNPqsTjwslkND1f%2Ftheme-settings-google-fonts-open-embed.jpeg?alt=media\&token=571dcfe6-47de-474e-9d23-88c741f8f61a)

* Copy the value in the **href** attribute, then paste it into the URL setting in the theme editor on your store.

![](https://gblobscdn.gitbook.com/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHC-UopSSs83jB5pshF%2F-MHC9C0eCxM1nAAJGo4a%2Ftheme-settings-google-fonts-copy-url.jpeg?alt=media\&token=24302fba-822b-4248-a74a-8396e869a3f3)

* Depend on which font you want to use as **General** or **Secondary** font, copy the font declaration and paste it into the **General Font Declaration** setting or **Secondary Font Declaration** setting. Note: not copy the "**font-family:**" word.

![](https://gblobscdn.gitbook.com/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHC-UopSSs83jB5pshF%2F-MHC9YLQ1jaIaMJ7laYX%2Ftheme-settings-google-fonts-declaration.jpeg?alt=media\&token=6e3273dc-138d-444e-a057-f766a37f47ae)