- This topic has 6 replies, 2 voices, and was last updated 4 years ago by
David.
-
AuthorPosts
-
February 19, 2020 at 5:28 pm #1170991
Bodie
Hello!
I believe that I have done all the necessary steps to load a local font to my child theme, however, it isn’t working for me and I am wondering if it is a caching issue. I would love some help!
I learned a lot from My previous post on a similar issue where I made all the rookie mistakes with self-hosting fonts, but I have learned and grown, and yet still can’t get it to load in the Customizer.
I am following Tom’s guide for hosting local fonts here, and I have made sure that there aren’t any basic code errors such as trailing commas, etc. I have also double-checked that the links to the fonts are correct.
However, I am simply not able to see my added font
Avenir Next
in the customizer.Here is my CSS:
/* Avenir Next THIN */ @font-face { font-family: 'Avenir Next'; font-style: normal; font-weight: 200; src: url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-thin.eot'); /* IE9 Compat Modes */ src: local('Avenir Next Thin'), local('AvenirNextThin'), url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-thin.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-thin.woff2') format('woff2'), /* Super Modern Browsers */ url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-thin.woff') format('woff'), /* Modern Browsers */ url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-thin.ttf') format('truetype'); /* Safari, Android, iOS */ } /* Avenir Next THIN - Italic */ @font-face { font-family: 'Avenir Next'; font-style: italic; font-weight: 200; src: url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-thin-italic.eot'); /* IE9 Compat Modes */ src: local('Avenir Next Thin Italic'), local('AvenirNextThin-Italic'), url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-thin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-thin-italic.woff') format('woff'), /* Modern Browsers */ url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-thin-italic.ttf') format('truetype'); /* Safari, Android, iOS */ } /* Avenir Next REGULAR */ @font-face { font-family: 'Avenir Next'; font-style: normal; font-weight: 300; src: url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-regular.eot'); /* IE9 Compat Modes */ src: local('Avenir Next Regular'), local('AvenirNextRegular'), url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-regular.woff') format('woff'), /* Modern Browsers */ url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-regular.ttf') format('truetype'); /* Safari, Android, iOS */ } /* Avenir Next REGULAR - Italic */ @font-face { font-family: 'Avenir Next'; font-style: italic; font-weight: 300; src: url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-regular-italic.eot'); /* IE9 Compat Modes */ src: local('Avenir Next Regular Italic'), local('AvenirNextRegular-Italic'), url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-regular-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-regular-italic.woff') format('woff'), /* Modern Browsers */ url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-regular-italic.ttf') format('truetype'); /* Safari, Android, iOS */ } /* Avenir Next MEDIUM */ @font-face { font-family: 'Avenir Next'; font-style: normal; font-weight: 500; src: url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-medium.eot'); /* IE9 Compat Modes */ src: local('Avenir Next Medium'), local('AvenirNextMedium'), url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-medium.woff2') format('woff2'), /* Super Modern Browsers */ url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-medium.woff') format('woff'), /* Modern Browsers */ url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-medium.ttf') format('truetype'); /* Safari, Android, iOS */ } /* Avenir Next MEDIUM - Italic */ @font-face { font-family: 'Avenir Next'; font-style: italic; font-weight: 500; src: url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-medium-italic.eot'); /* IE9 Compat Modes */ src: local('Avenir Next Medium Italic'), local('AvenirNextMedium-Italic'), url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-medium-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-medium-italic.woff') format('woff'), /* Modern Browsers */ url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-medium-italic.ttf') format('truetype'); /* Safari, Android, iOS */ } /* Avenir Next DEMIBOLD */ @font-face { font-family: 'Avenir Next'; font-style: normal; font-weight: 700; src: url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-demi.eot'); /* IE9 Compat Modes */ src: local('Avenir Next Demibold'), local('AvenirNextDemibold'), url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-demi.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-demi.woff2') format('woff2'), /* Super Modern Browsers */ url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-demi.woff') format('woff'), /* Modern Browsers */ url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-demi.ttf') format('truetype'); /* Safari, Android, iOS */ } /* Avenir Next DEMIBOLD - Italic */ @font-face { font-family: 'Avenir Next'; font-style: italic; font-weight: 700; src: url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-demi-italic.eot'); /* IE9 Compat Modes */ src: local('Avenir Next Demibold Italic'), local('AvenirNextDemibold-Italic'), url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-demi-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-demi-italic.woff') format('woff'), /* Modern Browsers */ url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-demi-italic.ttf') format('truetype'); /* Safari, Android, iOS */ } /* Avenir Next BOLD */ @font-face { font-family: 'Avenir Next'; font-style: normal; font-weight: 800; src: url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-bold.eot'); /* IE9 Compat Modes */ src: local('Avenir Next Bold'), local('AvenirNextBold'), url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-bold.woff2') format('woff2'), /* Super Modern Browsers */ url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-bold.woff') format('woff'), /* Modern Browsers */ url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-bold.ttf') format('truetype'); /* Safari, Android, iOS */ } /* Avenir Next BOLD - Italic */ @font-face { font-family: 'Avenir Next'; font-style: italic; font-weight: 800; src: url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-bold-italic.eot'); /* IE9 Compat Modes */ src: local('Avenir Next Bold Italic'), local('AvenirNextBold-Italic'), url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-bold-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-bold-italic.woff') format('woff'), /* Modern Browsers */ url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-bold-italic.ttf') format('truetype'); /* Safari, Android, iOS */ }
and here is my function:
add_filter( 'generate_typography_default_fonts', function( $fonts ) { $fonts[] = 'Avenir Next'; return $fonts; } );
I am not sure. I have tried everything that I can think of but I cannot get the font to load. Help is much appreciated!
Thanks so much!
Bodie
(post edited with updated code on February 20, 2020)
February 20, 2020 at 10:03 am #1171830Tom
Lead DeveloperLead DeveloperHi there,
This function is responsible for adding the font name to the Customizer:
add_filter( 'generate_typography_default_fonts', function( $fonts ) { $fonts[] = 'Avenir Next'; return $fonts; } );
I just added it to my test site using the Code Snippets plugin (but you can use your child theme functions.php file), and I’m seeing it at the bottom of the System Fonts section of the dropdown: https://www.screencast.com/t/aQnRzdvD48
Are you positive that it’s not there?
February 20, 2020 at 11:02 am #1171870Bodie
It’s so weird, Tom. I am racking my brain as to why it won’t show up!
https://www.dropbox.com/s/d5w6umdfdk62d6y/No%20Avenir%20Sad%20Panda.png?dl=0
Right now it is in the functions.php of my child theme. Maybe I should try the plugin instead? This is my entire child theme functions file
<?php /** * GeneratePress child theme functions and definitions. * * Add your custom PHP in this file. * Only edit this file if you have direct access to it on your server (to fix errors if they happen). */ function generatepress_child_enqueue_scripts() { if ( is_rtl() ) { wp_enqueue_style( 'generatepress-rtl', trailingslashit( get_template_directory_uri() ) . 'rtl.css' ); } } add_action( 'wp_enqueue_scripts', 'generatepress_child_enqueue_scripts', 100 ); add_filter( 'generate_typography_default_fonts', function( $fonts ) { $fonts[] = 'Avenir Next'; return $fonts; } );
I am wondering if this is a caching issue? It doesn’t show up in any browser for me yet. I will keep trying, thanks for responding.
Bodie
February 20, 2020 at 11:27 am #1171877Bodie
Ok so it must have been caching because here is what I just did and now it works but I don’t get it:
Checked again with function in functions.php – Didn’t work
Deleted from functions.php and moved to Code Snippets plugin – WORKS!Then..
I deactivated Code Snippets and it still worked?
Deleted Code Snippets, moved the code back to functions.php and now it shows up and works great.Moral of the story:
1. Code Snippets is a magical plugin, solving problems even when it is not activated on a site
2. I hate hate hate hate cacheing when building sitesThanks Tom!
February 20, 2020 at 5:05 pm #1172066Tom
Lead DeveloperLead DeveloperDefinitely sounds like caching. Glad you got it sorted 🙂
February 12, 2021 at 3:28 am #1655534Annamari
I have a similar problem, and even Code snippets plugin doesn’t help.
This is my CSS:
/* pt-sans-regular - latin-ext_latin */ @font-face { font-family: 'PT Sans'; font-style: normal; font-weight: 400; src: url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */ url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-regular.svg#PTSans') format('svg'); /* Legacy iOS */ } /* pt-sans-italic - latin-ext_latin */ @font-face { font-family: 'PT Sans'; font-style: italic; font-weight: 400; src: url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-italic.eot'); /* IE9 Compat Modes */ src: local(''), url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-italic.woff') format('woff'), /* Modern Browsers */ url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-italic.svg#PTSans') format('svg'); /* Legacy iOS */ } /* pt-sans-700 - latin-ext_latin */ @font-face { font-family: 'PT Sans'; font-style: normal; font-weight: 700; src: url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-700.eot'); /* IE9 Compat Modes */ src: local(''), url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */ url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-700.svg#PTSans') format('svg'); /* Legacy iOS */ } /* pt-sans-700italic - latin-ext_latin */ @font-face { font-family: 'PT Sans'; font-style: italic; font-weight: 700; src: url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-700italic.eot'); /* IE9 Compat Modes */ src: local(''), url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */ url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-700italic.woff') format('woff'), /* Modern Browsers */ url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-700italic.svg#PTSans') format('svg'); /* Legacy iOS */ } /* open-sans-regular - latin-ext_latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/open-sans-v18-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/open-sans-v18-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/open-sans-v18-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/open-sans-v18-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */ url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/open-sans-v18-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/open-sans-v18-latin-ext_latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-700 - latin-ext_latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/open-sans-v18-latin-ext_latin-700.eot'); /* IE9 Compat Modes */ src: local(''), url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/open-sans-v18-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/open-sans-v18-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/open-sans-v18-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */ url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/open-sans-v18-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/open-sans-v18-latin-ext_latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */ }
and this is my functions.php:
add_filter( 'generate_typography_default_fonts', function( $fonts ) { $fonts[] = 'Open Sans'; $fonts[] = 'PT Sans'; return $fonts; } );
and my fonts don’t load… I can see them in the customizer (with system fonts), but after choosing them and publishing the setting, when I get back to this setting option, I can see that it has swapped back to Google fonts.
What am I doing wrong?
February 12, 2021 at 7:16 am #1655933David
StaffCustomer SupportHi there,
can you raise a new topic, where you can share a link to your site, so we can take a look at why they’re not loading.
-
AuthorPosts
- You must be logged in to reply to this topic.