How do I add a google font to the debut theme?

Solved
bloombubs
New Member
2 0 2

Could anyone please help me, I am wanting to use the google font fredoka one to the debut theme but I am having trouble figuring out how to do this.

SWSolutions
Trailblazer
199 27 49

Hi 

Add this URL in theme file inside the <head> tag.

<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">

 

And add "font-family: 'Fredoka One', cursive;" css property on text.

 

Example-

 

h1{

font-family: 'Fredoka One', cursive;

}

 

Thanks

For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: silencewebsolutions@gmail.com
0 Likes
dmwwebartisan
Shopify Partner
7443 1765 2366

hi 

please check vedio

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
dmwwebartisan
Shopify Partner
7443 1765 2366

This is an accepted solution.

hey

 

When you login to your Shopify dashboard, go to "Online Store", then from the selected theme click the menu "Actions" and select "Edit code".
From "Layout" folder, open "theme.liquid" file by double clicking it, then add your google font import code anywhere inside <head> tags:

 

<link href="https://fonts.googleapis.com/css?family=Tajawal:300,500,700&display=swap&subset=arabic" rel="stylesheet">


Now save, and open from "Assets" folder, these 2 style files "theme.scss.liquid" and "timber.scss.liquid", you will have to do the same for both files.
From the google font page you are importing take the font name, in my case its "'Tajawal', sans-serif;" then on both style files scroll down to "Typography" section and replace these 3 code lines:

 

$headerFontStack: {{ header_family.family }}, {{ header_family.fallback_families }};
$bodyFontStack: {{ base_family.family }}, {{ base_family.fallback_families }};
$accentFontStack: {{ accent_family.family }}, {{ accent_family.fallback_families }};


with:

 

$headerFontStack: 'Tajawal', sans-serif;
$bodyFontStack: 'Tajawal', sans-serif;
$accentFontStack: 'Tajawal', sans-serif;


Save both files, and here you go!

 

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
bloombubs
New Member
2 0 2

thank you!!

Effyl01
Excursionist
18 0 7

Hi,

I've been trying to add google font to the Debut theme also, i am using Debut version 17.7 and there is no theme.scss.liquid file.

Any advice?

Mariah2
New Member
2 0 0

I've tried several times to follow these instructions, but I'm not seeing the same content and getting an error message when I try to use the code you're suggesting. The error is that the setting type (value, label, group) is not valid. I also tried using the written instructions from this post, but cannot find the same file names referenced or "headerfontstack" as a value in an of the asset files I've looked at.

Also, if updates are made in the future to the theme how what do I need to do to ensure my changes are not overwritten?

0 Likes
Mariah2
New Member
2 0 0

Were you able to figure this out? I'm having the same trouble trying to follow these instructions. 

0 Likes