I see the H1 font seems to be responsive by default (font-size is reduced as browser window shrinks or is viewed on tablet or mobile device), however, when I enable my cufon font (using the All-in-One Cufon plugin), the font-size no longer responds to the breaking points but instead just stays at a large size therefore running off the screen as the browser window gets smaller (or when viewing on a tablet/mobile device).
Is there a special bit of code I can add to the custom css section to keep the responsiveness of the h1 tag even if I am using a cufon font?
Any advice is appreciated.
My site currently has a coming soon page up and so if you need access to my site to preview the problem, please contact me at (Email address hidden if logged out) for the login details.
Thank you
Hi,
Please send the login details to //…
Include the word “Kriesi” on the subject. Add the link of this thread on your email.
Regards,
Ismael
Hi,
You have a lot of cufon fonts on your site and targeting them each will be a pain in the arse. I suggest you use the default google fonts or add your own. Edit functions.php, add this line of code below line 3:
add_filter( 'avf_google_heading_font', 'avia_add_heading_font');
function avia_add_heading_font($fonts)
{
$fonts['Arvo'] = 'Arvo:400,700';
return $fonts;
}
add_filter( 'avf_google_content_font', 'avia_add_content_font');
function avia_add_content_font($fonts)
{
$fonts['Arvo'] = 'Arvo:400,700';
return $fonts;
}
You can browse google web fonts here:
http://www.google.com/fonts/
Regards,
Ismael