Why aren't Google fonts working on my website?

[Caneleo1234]

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:   

}

My website is www.meridianetch.com.au

Any help would be greatly appreciated. Thanks!

[GabrielS]

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

[Caneleo1234]

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 · 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:

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

Have a nice day!

[Caneleo1234]

Thanks so much Gabriel, it worked perfectly.

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

Much appreciated!