# Using Custom Fonts

**Your brand** is important because you want to always be "memorable" and reinforce your style. With the *standard Thinkific course player* you have *limited control* over the font selection that is used for **both the content area** and the **course side menu**

{% hint style="info" %}
We are going to use free Google fonts for this example. Other fonts may work but require you to provide am embed script that can be used via CSS in the player in order to be reference able.
{% endhint %}

* [ ] **1) Open a new browser window** and go to [fonts.google.com](https://fonts.google.com/)

![](https://651120762-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MTD-6pu1yAqNq_ijO-Q%2F-MTE5mbbn1IiJr7YrfV-%2F-MTE8OEdRhzpkE6m_oxn%2FScreen%20Shot%202021-02-10%20at%2010.30.50%20PM.png?alt=media\&token=19b6fa2d-5c7d-40af-aae8-9b51f14e6b63)

* [ ] 2\) Search for **Dancing Script**, click it and then choose 'Select this style' for *Regular 400*

![](https://651120762-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MTD-6pu1yAqNq_ijO-Q%2F-MTE5mbbn1IiJr7YrfV-%2F-MTE8otIYiYA8vD0TrlJ%2FScreen%20Shot%202021-02-10%20at%2010.31.24%20PM.png?alt=media\&token=41f90060-0b57-4f26-94ee-b3e7fa31afe8)

* [ ] 3\) Now lets also search for **Nunito** and click 'Select this style' for *Light 300*

![](https://651120762-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MTD-6pu1yAqNq_ijO-Q%2F-MTEADAa5d1SIrG9MMfa%2F-MTEAKCbu03uXvepNSot%2FScreen%20Shot%202021-02-10%20at%2010.33.32%20PM.png?alt=media\&token=29f5b489-30b5-4fa8-85d1-fb0db61f5fda)

* [ ] 4\) Click the icon in the upper right corner to "View your selected families"

![](https://651120762-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MTD-6pu1yAqNq_ijO-Q%2F-MTEADAa5d1SIrG9MMfa%2F-MTEANWTGDeiPyrTz7ma%2FScreen%20Shot%202021-02-10%20at%2010.34.49%20PM.png?alt=media\&token=5f3a0eb7-14e9-49b1-b749-ec14b807bc47)

* [ ] 5\) Select the code snippet that appears in section on the lower right as shown in the image below.

![](https://651120762-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MTD-6pu1yAqNq_ijO-Q%2F-MTEAPMRD5cFvb8EhVoq%2F-MTEAvWGXaXy_9IHpvic%2FNunito-Google-Fonts.png?alt=media\&token=586d661e-fd7a-4476-938f-a059e34c31f5)

* [ ] 6\) Make sure you have **selected all of the text**

{% hint style="info" %}
Keep the fonts.google.com tab open as we will need one more piece of info in a second.
{% endhint %}

* [ ] 7\) Now back in your[ Power Style Editor page](https://playeah-docs.robgalvin.co/power-style-quick-start-guide/quick-start-guide#your-first-power-style) that we setup before, open the **Custom Fonts** section settings and paste the code in there.

![](https://651120762-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MTD-6pu1yAqNq_ijO-Q%2F-MTEAPMRD5cFvb8EhVoq%2F-MTEBhF1AJyHwqPv7-B0%2FSite-Builder-Thinkific%20\(67\).png?alt=media\&token=79c89bc1-9f72-4f07-b6b5-b7377615bb2e)

* [ ] 8\) Now let's go ahead and change our **Heading fonts to all use Dancing Script**. To do this, go back to the Google fonts and and right below where you copied the previous code snippet, you will see another one called ***CSS Rules to specify families***

![](https://651120762-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MTD-6pu1yAqNq_ijO-Q%2F-MTEAPMRD5cFvb8EhVoq%2F-MTECSSFAojeVW73Hsy7%2FScreen%20Shot%202021-02-10%20at%2010.49.50%20PM.png?alt=media\&token=91e561f5-f47e-4fbf-9f0f-29066fdda62f)

* [ ] 9\) We only want to copy the first line where it says font-family: 'Dancing Script', cursive;
* [ ] 10\) Head back to the Power Style Editor page and open the **Content Text** setting grouping

![](https://651120762-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MTD-6pu1yAqNq_ijO-Q%2F-MTED3SJWK4VLY-n-Fk8%2F-MTEE-BcpNjtODF-nQ3j%2FSite-Builder-Thinkific%20\(68\).png?alt=media\&token=3955b697-e6bb-44fa-972d-e6bf79807d0b)

{% hint style="info" %}
There are **three settings for each Heading types: Heading 1 - Heading 4**
{% endhint %}

* [ ] 11\). Change each drop down from "Hidden" to "**Custom Color or Font**"
* [ ] 12\) You will notice that the fonts have changed in the preview. But also the color changed as well. Go ahead and update the colors for each one as you see fit.

![](https://651120762-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MTD-6pu1yAqNq_ijO-Q%2F-MTED3SJWK4VLY-n-Fk8%2F-MTEEoTruI_zXpmjPkSU%2FSite-Builder-Thinkific%20\(69\).png?alt=media\&token=baa05495-389e-4676-9a6c-a58c8682c2d1)

* [ ] 13\) Now we can click the copy button again, but this time we will be **replacing the current snippet** that was pasted before.

![](https://651120762-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MTD-6pu1yAqNq_ijO-Q%2F-MTED3SJWK4VLY-n-Fk8%2F-MTEFw9yMZZtLdHF2wGP%2FSettings-RobGalvinStaging%20\(6\).png?alt=media\&token=8f34ea97-005e-41dd-bcdb-e9a70595eae9)

* [ ] Now anytime that a **heading style is used inside a text lesson** or inside a text area under a video, you will see the style you had assigned. If you need to change it in the future, you now only need to change it in one place.

![](https://651120762-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MTD-6pu1yAqNq_ijO-Q%2F-MTEFzev32QQ141GbpUG%2F-MTEH4XggxixceCCkaQI%2FScreen%20Shot%202021-02-10%20at%2011.10.05%20PM.png?alt=media\&token=8dd9c231-a5b5-4c9d-a9a9-98b5af8526d6)

{% hint style="danger" %}
A**bout "inline styles" used in the WYSIWYG editor:** if you have used the color or font family options inside of the text editor, then the those styles will always be used and not be over written by plaYEAH! style.
{% endhint %}