Shopify Design

bloombubs · ‎05-09-2020

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.

dmwwebartisan · ‎05-09-2020

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

SWSolutions · ‎05-09-2020

Hi

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

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

dmwwebartisan · ‎05-09-2020

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

dmwwebartisan · ‎05-09-2020

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

bloombubs · ‎05-11-2020

thank you!!

Effyl01 · ‎12-13-2020

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 · ‎03-11-2021

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?

Mariah2 · ‎03-13-2021

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

Shopify Design

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

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

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

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

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

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

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

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

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

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

Community Blog Articles

Shopify Community

Support

Shopify

Quick Links