Customer requests that I use a google font for text and headers (no problem). At the same time they require that I use another font as an overlay on some content sections and/or sliders. I can only assign one font as header font. Is there a workaround that enables me to use another header font for say a H1 or H2 tag so that I can choose?
Hey Pierre,
Thank you for the inquiry.
You can define a different style for a specific element in the Enfold > Advanced Styling panel, but if you want more control over the styles of the elements, you can register another font manually using the @import rule in the style.css file or by using one of the available hooks such as wp_enqueue_scripts.
Example of the @import:
@import url(https://fonts.googleapis.com/css?family=Lora);
@import url(https://fonts.googleapis.com/css?family=Oswald);
Example using the hook:
function ava_add_google_fonts() {
wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300', false );
}
add_action( 'wp_enqueue_scripts', 'ava_add_google_fonts' );
You will then have to apply the font manually to the elements using css.
There are also plugins available:
// https://wordpress.org/plugins/olympus-google-fonts/
// https://wordpress.org/plugins/local-google-fonts/
You can choose fonts from Google Fonts (https://fonts.google.com/).
Best regards,
Ismael
Thank you for your reply. I installed CSS hero and my problem is solved.
Hi pierrevanlier,
We’re glad to hear that :)
Thanks for using Enfold and have a great day!
Best regards,
Nikko