- This topic has 14 replies, 2 voices, and was last updated 5 years, 11 months ago by Tom.
-
AuthorPosts
-
April 29, 2018 at 11:59 pm #563543Benjamin
Hi!
I’ve been trying for around the past three hours to add a custom font to the customizer on a client site. I’ve followed everything perfectly as far as I can see and yet while the name of the font shows up in the customizer, when I try to use it, it turns into Times New Roman.
Not helpful. I’ve been slowly going crazy… π
Just in case I did something horribly wrong, I copied and pasted Tom’s code from here https://generatepress.com/forums/reply/274678/ and put in my font’s details. No good.
Snippet
add_filter( ‘generate_typography_default_fonts’,’bjh_add_system_fonts’ );
function bjh_add_system_fonts( $fonts ) {
$fonts[] = ‘Museo 500’;
$fonts[] = ‘Museo 700’;
$fonts[] = ‘MuseoSans 500’;
$fonts[] = ‘MuseoSans 500Italic’;
return $fonts;
}CSS Font Face
@font-face {
font-family: ‘Museo 700’;
src: url(‘https://oakdalebaptistmn.com/wp-content/themes/generatepress_child/fonts/367925_0_0.eot’); /* IE9 Compat Modes */
src: url(‘https://oakdalebaptistmn.com/wp-content/themes/generatepress_child/fonts/367925_0_0.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘https://oakdalebaptistmn.com/wp-content/themes/generatepress_child/fonts/367925_0_0.woff2’) format(‘woff2’), /* Super Modern Browsers */
url(‘https://oakdalebaptistmn.com/wp-content/themes/generatepress_child/fonts/367925_0_0.woff’) format(‘woff’), /* Pretty Modern Browsers */
url(‘https://oakdalebaptistmn.com/wp-content/themes/generatepress_child/fonts/367925_0_0.ttf’) format(‘truetype’), /* Safari, Android, iOS */
}@font-face {
font-family: ‘Museo 500’;
src: url(‘https://oakdalebaptistmn.com/wp-content/themes/generatepress_child/fonts/367925_1_0.eot’); /* IE9 Compat Modes */
src: url(‘https://oakdalebaptistmn.com/wp-content/themes/generatepress_child/fonts/367925_1_0.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘https://oakdalebaptistmn.com/wp-content/themes/generatepress_child/fonts/367925_1_0.woff2’) format(‘woff2’), /* Super Modern Browsers */
url(‘https://oakdalebaptistmn.com/wp-content/themes/generatepress_child/fonts/367925_1_0.woff’) format(‘woff’), /* Pretty Modern Browsers */
url(‘https://oakdalebaptistmn.com/wp-content/themes/generatepress_child/fonts/367925_1_0.ttf’) format(‘truetype’), /* Safari, Android, iOS */
}@font-face {
font-family: ‘MuseoSans 500’;
src: url(‘https://oakdalebaptistmn.com/wp-content/themes/generatepress_child/fonts/367925_2_0.eot’); /* IE9 Compat Modes */
src: url(‘https://oakdalebaptistmn.com/wp-content/themes/generatepress_child/fonts/367925_2_0.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘https://oakdalebaptistmn.com/wp-content/themes/generatepress_child/fonts/367925_2_0.woff2’) format(‘woff2’), /* Super Modern Browsers */
url(‘https://oakdalebaptistmn.com/wp-content/themes/generatepress_child/fonts/367925_2_0.woff’) format(‘woff’), /* Pretty Modern Browsers */
url(‘https://oakdalebaptistmn.com/wp-content/themes/generatepress_child/fonts/367925_2_0.ttf’) format(‘truetype’), /* Safari, Android, iOS */
}@font-face {
font-family: ‘MuseoSans 500Italic’;
src: url(‘https://oakdalebaptistmn.com/wp-content/themes/generatepress_child/fonts/367925_3_0.eot’); /* IE9 Compat Modes */
src: url(‘https://oakdalebaptistmn.com/wp-content/themes/generatepress_child/fonts/367925_3_0.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘https://oakdalebaptistmn.com/wp-content/themes/generatepress_child/fonts/367925_3_0.woff2’) format(‘woff2’), /* Super Modern Browsers */
url(‘https://oakdalebaptistmn.com/wp-content/themes/generatepress_child/fonts/367925_3_0.woff’) format(‘woff’), /* Pretty Modern Browsers */
url(‘https://oakdalebaptistmn.com/wp-content/themes/generatepress_child/fonts/367925_3_0.ttf’) format(‘truetype’), /* Safari, Android, iOS */
}The typefaces are all in a folder called “fonts” (as per your recommendation) in the child theme folder. Also, I’ve uploaded the fonts using the new custom fonts feature in Elementor Pro, so some of the homepage is set to the correct fonts while the rest are being uncooperative.
Thanks!
April 30, 2018 at 9:52 am #563950TomLead DeveloperLead DeveloperWhen you paste one of those URLs into your browser, does the font load?:
https://oakdalebaptistmn.com/wp-content/themes/generatepress_child/fonts/367925_3_0.woff2
I couldn’t get the above to load?
April 30, 2018 at 12:08 pm #564034Benjaminofbc.flywheelsites.com//wp-content/themes/generatepress_child/fonts/name_of_font.extension
http://www.oakdalebaptistmn.com//wp-content/themes/generatepress_child/fonts/name_of_font.extensionI’ve been testing it, and it looks like having https:// in there is what is throwing it off. Odd, as I do have an SSL and the website IS https, but I’m glad that’s figured out!
I updated the CSS with the links that work and made sure the snippet was linking to the right names, but they are all still showing up as times new roman.
April 30, 2018 at 8:50 pm #564239TomLead DeveloperLead DeveloperHmm, I’m not seeing anything super obvious. How did you build the font files?
What if you use
http://
?April 30, 2018 at 9:33 pm #564259BenjaminMyFonts gave me a webfont kit when I bought the fonts.
I know the font files themselves are working because I’m using the exact same files with Elementor Pro’s Custom Font feature and the fonts do show up properly on multiple devices.
I just tried adding http:// and http://www. the URLs. Neither had any effect.
May 1, 2018 at 8:14 am #564717TomLead DeveloperLead DeveloperCan you try removing the CSS comments from the child style.css file? You’ll see here there’s some parse errors if you run your URL: https://jigsaw.w3.org/css-validator/
May 1, 2018 at 7:09 pm #565052BenjaminRan the validator and removed CSS comments. For some reason, generatepress is looking for my fonts in the Google Fonts repositry. ??? [sigh]
At this point, there has got to be something critically wrong I’m missing here. I’ve done this before and it has worked… Anyway, I’m going to redownload the fonts and start over from scratch. Hopefully this time it’ll work. I’ll keep you updated.
May 1, 2018 at 9:19 pm #565092TomLead DeveloperLead DeveloperThe only way GP will call Google Fonts is if a font is selected in Customize > Typography within the Google Fonts are of the select dropdown. Perhaps check your font family settings to make sure they’re set to your system font you added (or inherit).
May 3, 2018 at 7:22 pm #566908BenjaminHi Tom!
I don’t claim to understand WHY, but the problem seemed to be coming from the fact that I was uploading the fonts through SFTP. I uploaded the font files through the media library in WP, put the URLs in the CSS, put the names in the snippet, it showed up in the customizer, and worked FLAWLESSLY.
Thanks for sticking through all of this with me! The theme is amazing!
P.S. For future reference, I’m writing down exactly what I did in detail. If you could maybe go into the process a BIT more in the documentation, instead of referring people to other documents that aren’t talking about adding a font, I’m sure a lot of people would appreciate it! π
May 3, 2018 at 7:48 pm #566923BenjaminIf it helps any, here’s what I wrote down π :
1. Install and Activate the Code Snippets plugin.
2. Upload, Install, and Activate the GeneratePress Child Theme.
3. Upload .woof and .woof2 font files. You can do this by either:
1. Uploading the font files to a folder in the GP Child theme called “fonts,” or…
2. Uploading the font files to the WordPress Media Library.
4. Paste the following in the GP Child theme’s CSS stylesheet, editing where appropriate, and recreating the code for each font you are trying to upload.@font-face { font-family: 'FONT FAMILY NAME'; src: url('WOOF2 FONT URL') format('woff2'), url('WOOF FONT URL') format('woff'); font-weight: normal; font-style: normal; }
5. Add a new Code Snippet, paste in the following code, editing where appropriate and adding a new “$fonts [] = ‘FONT FAMILY NAME’;” for each font family you are trying to add.
add_filter( 'generate_typography_default_fonts','bjh_add_system_fonts' ); function bjh_add_system_fonts( $fonts ) { $fonts[] = 'FONT FAMILY NAME'; return $fonts; }
6. Open the customizer and use the new fonts!
May 3, 2018 at 9:28 pm #566971TomLead DeveloperLead DeveloperThank you for sharing your method! Did you have to do anything special for the Media Library to accept the files?
May 3, 2018 at 9:40 pm #566977BenjaminNot at all, actually.
Elementor Pro requires you to upload font files that way in order to use their custom font feature, so I guess WP must have allowed it for a while…
May 4, 2018 at 9:10 am #567472TomLead DeveloperLead DeveloperInteresting – thanks for the info! π
May 4, 2018 at 10:08 am #567538BenjaminQuick update: It would appear that the ability to upload font files changes depending on your hosting provider. I just tried uploading font files on a different provider I use, and they blocked the files for security reasons, so I just uploaded using the FTP option. (Worked flawlessly! Something either must have been weird with my SSL, as I had just installed it, or the SFTP, becuase I didn’t run into any other issues.) Just something to keep in mind!
May 4, 2018 at 10:26 am #567554TomLead DeveloperLead DeveloperYea, font files can be dangerous. I’m surprised WordPress themselves allow them to the uploaded.
Good to know the FTP method is working for you now π
-
AuthorPosts
- You must be logged in to reply to this topic.