Re: Google fonts not being recognised

Solved

Why aren't Google fonts working on my website?

Caneleo1234
Excursionist
38 0 8

Hi guys,

I am trying to input a handwriting type of font in my collection descriptions. I'm using the below code but the fonts I have tried don't work and if they have 'cursive' in the name it just uses a generic ugly cursive font instead of the one I got from Google Fonts. I've tried a few and none work. Any ideas why?

 

.collection__description {
text-align: center !important;
color:
font-family:   
}
 
 
Any help would be greatly appreciated. Thanks!
Accepted Solution (1)
GabrielS
Shopify Partner
486 107 116

This is an accepted solution.

Try the other alternative.

 

Add the below within your header code.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">

It should be looking similar to the below screenshot:

GabrielS_0-1664810008327.png

If further assistance or other custom edits are considered, you can hire me or other developers.

 

Have a nice day!

Gabriel Soare | Web Developer
Are you looking to customize your Shopify or to fix a website bug?
You can reach me through my website gabrielsoare.com, DM, or email [email protected].
Have I helped you? Like my post.

View solution in original post

Replies 4 (4)

GabrielS
Shopify Partner
486 107 116

Hi there,

 

What font are you trying to use? Below, is a snippet example that when added to your theme.css file should work as expected.

@import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap');
.collection_description p {
font-family: 'Cedarville Cursive', cursive !important;
}

Let me know if this fixed your issue.

 

Kind regards,

Gabriel

 

Gabriel Soare | Web Developer
Are you looking to customize your Shopify or to fix a website bug?
You can reach me through my website gabrielsoare.com, DM, or email [email protected].
Have I helped you? Like my post.
Caneleo1234
Excursionist
38 0 8

Thanks for replying!

 

This is what I put:

 

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
.collection__description p {
text-align: center !important;
font-family: 'Dancing Script', cursive !important;
}

 

Web link below shows how it is a super ugly font, not the font as it appears on Google Fonts. Any idea why?

https://meridianetch.com.au/collections/personalised-cake-toppers

GabrielS
Shopify Partner
486 107 116

This is an accepted solution.

Try the other alternative.

 

Add the below within your header code.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">

It should be looking similar to the below screenshot:

GabrielS_0-1664810008327.png

If further assistance or other custom edits are considered, you can hire me or other developers.

 

Have a nice day!

Gabriel Soare | Web Developer
Are you looking to customize your Shopify or to fix a website bug?
You can reach me through my website gabrielsoare.com, DM, or email [email protected].
Have I helped you? Like my post.
Caneleo1234
Excursionist
38 0 8

Thanks so much Gabriel, it worked perfectly.

I'll keep your details for when I need work done in the future.

Much appreciated!