-
Posts
-
Hi
I am trying to apply different fonts to different text boxes. I have created Custom CSS Class for a text box, e.g. ‘georgia’, and then put this in Custom CSS:
#top .georgia {
font-family: “Georgia”!important;
}This works fine with any Web save fonts but I can’t get it to work with Google fonts. Eg, if I try this
#top .cardo {
font-family: “Cardo”!important;
}
the font is not applied.You can see an e.g. on the link attached.
How can I make this work with Google fonts?
many thanks
Peter
Hi Peter,
How are you importing the font? You could try this in Quick CSS to see if you have any luck with it:
@import url('https://fonts.googleapis.com/css?family=Cardo');Best regards,
RikardHi Rikard
I’m afraid that didn’t make any difference.
I am using the Google fonts installed with Enfold and ones I have added via the functions.php.
many thanks
Peter
Hi,
How are you loading the fonts? Please try this in the functions.php file.
add_action('wp_head','hook_font'); function hook_font() { $output = "<link rel='stylesheet' id='avia-google-webfont' href='//fonts.googleapis.com/css?family=Open+Sans:300,700' type='text/css' media='all'/> "; echo $output; }Adjust the href value.
Best regards,
IsmaelHi Ismael
That doesn’t seem to make any difference.I am loading the extra Google fonts in the functions.php with this:
add_filter( ‘avf_google_heading_font’, ‘avia_add_heading_font’);
function avia_add_heading_font($fonts)
{
$fonts[‘Slabo’] = ‘Slabo’;
$fonts[‘Sintony’] = ‘Sintony’;
$fonts[‘Mali’] = ‘Mali’;
$fonts[‘Poppins’] = ‘Poppins’;
return $fonts;
}add_filter( ‘avf_google_content_font’, ‘avia_add_content_font’);
function avia_add_content_font($fonts)
{
$fonts[‘Slabo’] = ‘Slabo’;
$fonts[‘Sintony’] = ‘Sintony’;
$fonts[‘Mali’] = ‘Mali’;
$fonts[‘Poppins’] = ‘Poppins’;
return $fonts;
}many thanks
Peter
Hi,
Please try adding following code to Functions.php file
function avia_custom_cardo_font() { wp_enqueue_style( 'Lato font', 'https://fonts.googleapis.com/css?family=Cardo' ); } add_action( 'wp_enqueue_scripts', 'avia_custom_cardo_font' );Then following code should work
#top .cardo { font-family: "Cardo"!important; }If that too does not help, please create a temporary admin login and post it here privately
Best regards,
YigitHi Yigit
That doesn’t seem to be working. I have attached the login in details.
Just to clarify things – as it might be that there is a better way to achieve what I am trying to do – I have a client who wants a website demonstrating lots of different font combinations. So I want to be able to apply various different fonts to text boxes and elements.many thanks
Peter
Hi,
We replaced the code in the functions.php file. The fonts are now loaded inside the head tag.
add_action('wp_head','hook_font'); function hook_font() { $output = " <link rel='stylesheet' id='avia-google-webfont' href='https://fonts.googleapis.com/css?family=Slabo' type='text/css' media='all'/>\n"; $output .= " <link rel='stylesheet' id='avia-google-webfont' href='https://fonts.googleapis.com/css?family=Cardo' type='text/css' media='all'/>\n"; $output .= " <link rel='stylesheet' id='avia-google-webfont' href='https://fonts.googleapis.com/css?family=Sintony' type='text/css' media='all'/>\n"; echo $output; }Best regards,
Ismael
- You must be logged in to reply to this topic.