Archived topic
Custom font not displaying
4 replies · Started by Heidi on December 3, 2019
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:
- Read the GP article on adding local fonts.
- 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.
- 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.)
- Realized that I had left out the local('font') from the first src: line, so added that to my CSS.
- 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?
- 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!
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 :)
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!!
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! :)
Problem fixed
