[Resolved] Custom font not displaying

[Heidi]

Hi GP team,

I’ve read a number of GP support threads on this topic in an effort to solve on my own. But I’m stuck. Here’s what I’ve done:

1. Read the GP article on adding local fonts.
2. Followed the instructions EXCEPT I didn’t have to add the filter function to upload the custom fonts to the WP media library because the fonts were already added to the media library when I enabled Elementor’s custom font function.
3. Added the custom CSS from the Google Webfonts Helper EXCEPT I used only one src: because the font I’m using does not have an .eot version. (I saw in one of Tom’s comments from a November 2017 thread that the user was missing the second src:, but I assume I don’t need that second one? If I do, I’m not sure what it would call if the .eot doesn’t exist.)
4. Realized that I had left out the local(‘font’) from the first src: line, so added that to my CSS.
5. Added the font-face CSS to the Additional CSS area in the Customizer. I’ve always added my custom CSS there, but should I be doing it someplace else?
6. Added PHP using the Code Snippets plugin.

The fonts (Playlist Script and Playlist Caps) show up fine in the Customizer, but do not actually display on the front end. When I inspect the Strong Testimonials element where the font is supposed to be featured, the correct font family is listed, but shows as a fallback serif font of Times New Roman.

I checked the font URLs in my browser, and they download as font files.

I am not using a child theme, just the Additional CSS area of the Customizer. Is a GP child theme required to get the fonts to work as part of the GP theme? And/or must I manually add the fonts to a folder vs. pulling from the media library?

FYI: The fonts work fine in Elementor, which I used to design the vast majority of the site. But the Strong Testimonials plugin pulls from the GP theme fonts, so I want to get the custom fonts to work there as well. The link to the site goes to a specific page where you can see that the testimonial h3 headings show as a basic, Times New Roman font instead of the Playlist Caps.

I am hoping the answer is some super obvious, easy thing I have overlooked. Thanks!

[Tom]

Hi Heidi,

Strange – can you try this instead?:

@font-face {
	font-family: 'Playlist Caps';
	font-style: normal;
	font-weight: bold;
	src: local('Playlist Caps'), local('Playlist-Caps'),
	url('https://www.YOUR-URL.com/wp-content/uploads/2019/02/Playlist-Caps.woff') format('woff'),
	url('https://www.YOUR-URL.com/wp-content/uploads/2019/02/Playlist-Caps.ttf') format('truetype');
}

Couple tweaks to the syntax there.

Let me know if it helps or not 🙂

[Heidi]

Yes! It works beautifully now! Was it an issue of removing the comments? Because the rest of the CSS looks the same as what I had.

I love it when the solution is as simple as this. Thank you very much!!

[Tom]

I have seen the comments cause issues for some reason. There was also a comma where a semi-colon should be.

Glad it’s working now! 🙂

[Alicja]

Problem fixed

[Author]

Posts