-
Posts
-
Enfold version 4.4.1
I’ve been trying for two days to get a custom CSS class selector to work with the included Exo Google Fonts, but the theme’s Heading Font choice for font family in the “theme options > general styling > fonts” section keeps overriding my custom CSS font family choice.
In my child theme style.css file I have the following CSS (see pastebin link):
https://pastebin.com/4VxF9JzK
FYI, the font-size and letter-spacing properties do work, just not the font-family property.In the text block on the homepage, I have the following HTML (see pastebin link):
https://pastebin.com/nTT20SpZThe only way I can get the Exo font to apply to the heading font is by selecting it in the “theme options > general styling > fonts” section. But I don’t want the Exo font to be used for site-wide heading titles, only for the special “main-products-heading-title” CSS class I created and added to my child theme style.css file.
On my homepage, just below the full width slider, look for the PRODUCT NAME® heading text to see what I’m referring to. I only want the Exo font family applied to the “main-products-heading-title” CSS class I created for and applied to this heading text.
Hi killyman,
Do you have the font added to the css? Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?
Best regards,
VictoriaThe only way I can get the Exo font to apply to the heading font is by selecting it in the “theme options > general styling > fonts” section. But I don’t want the Exo font to be used for site-wide heading titles, only for the special “main-products-heading-title” CSS class I created and added to my child theme style.css file.
I’ve set up a temp admin user account for you to access. See private content section.
Could the issue have to do with the avia-dynamic-css Style Sheet overriding my child theme Style Sheet settings?
Hi,
Thank you for the update.
You have to load the font first before you can use it. The font won’t load when it’s not selected in theme options so you have to load it manually.
// http://www.wpbeginner.com/wp-themes/how-add-google-web-fonts-wordpress-themes/
Example:
function wpb_add_google_fonts() { wp_enqueue_style( 'wpb-google-fonts', 'http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300', false ); } add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );That code loads the Open Sans font manually. Replace it with the “Exo” font url.
Best regards,
IsmaelThat worked finally. Thank you so much!
How would I add multiple Google Font families? Do I just repeat the wpb_add_google_fonts code block in the functions.php file as outlined below?
function wpb_add_google_fonts() { wp_enqueue_style( 'wpb-google-fonts', 'http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300', false ); } add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' ); function wpb_add_google_fonts() { wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Exo+2:400,400i,700,700i,800,800i', false ); } add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );
- You must be logged in to reply to this topic.