Why aren't Google fonts working on my website?

Technical Q&A
1

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!

2

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

3

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

4

Try the other alternative.

Add the below within your header code.

It should be looking similar to the below screenshot:

GabrielS_0-1664810008327.png
GabrielS_0-1664810008327.png1395×154 11.8 KB

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

Have a nice day!

1 Like
5

Thanks so much Gabriel, it worked perfectly.

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

Much appreciated!