Just a quick post. I have implemented cufon for a client’s website to replace the titles with a nice new non-web-safe font.
\nThis code worked perfectly to replace the titles with the new font.
\n
\nCufon.replace('h1', { fontFamily: 'Helvetica Neue LT W1G' });
\nCufon.replace('h2', { fontFamily: 'Helvetica Neue LT W1G' });
\nCufon.replace('h3', { fontFamily: 'Helvetica Neue LT W1G' });
\n
However, the client then asked for one of the titles (which was a link within an h3) to have a hover effect to show that it was a link. Fortunately cufon now supports :hover, so I was pleased to be able to implement this without resorting to separate JavaScript.
\nHowever, for the life of me I couldn’t get the hover effect to work!
\n
\nCufon.replace('h1', { fontFamily: 'Helvetica Neue LT W1G' });
\nCufon.replace('h2', { fontFamily: 'Helvetica Neue LT W1G' });
\nCufon.replace('h3', { fontFamily: 'Helvetica Neue LT W1G' });
\nCufon('#twitter-3 .widgettitle a', {
\nhover: {
\ncolor: 'aqua'
\n}
\n});
I had the right selector, the right syntax, everything. Finally, as a last resort, I scrapped the original code (top code excerpt to leave just the :hover replacement). Finally, it worked. So, I simply re-added the title replacement under the link :hover replacement, as below:
\n
\nCufon('#twitter-3 .widgettitle a', {
\nhover: {
\ncolor: 'aqua'
\n}
\n});
\nCufon.replace('h1', { fontFamily: 'Helvetica Neue LT W1G' });
\nCufon.replace('h2', { fontFamily: 'Helvetica Neue LT W1G' });
\nCufon.replace('h3', { fontFamily: 'Helvetica Neue LT W1G' });
\n
Hey presto – it worked 🙂 It seems that cufon works back up your list of rules in reverse, so the h3 general replacement was overwriting the specific h3 anchor hover lines! It took me a while to work this out, so hopefully this’ll help someone else.
\nAdd a comment if you like – I’m sure the code above could be further optimised.
\nAccording to Rein (see comments below), cufon hover will only work on anchor (<a>) tags. I haven’t tested that theory myself, but worth a note here – don’t want to be the cause of lost time!
\n","protected":false},"excerpt":{"rendered":"Just a quick post. I have implemented cufon for a client’s website to replace the titles with a nice new non-web-safe font. This code worked perfectly to replace the titles with the new font. Cufon.replace(‘h1’, { fontFamily: ‘Helvetica Neue LT W1G’ }); Cufon.replace(‘h2’, { fontFamily: ‘Helvetica Neue LT W1G’ }); Cufon.replace(‘h3’, { fontFamily: ‘Helvetica Neue LT W1G’ }); However, the client then asked for one of the titles (which was a link within an h3) to have a hover effect to show that it was a link. Fortunately cufon now supports :hover, so I was pleased to be able to […]
\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","clkt_auto_upload":"0","_clkt_publish_and_upload":false,"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":3,"activitypub_interaction_policy_quote":"","activitypub_status":"","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_wordproof_timestamp":false},"categories":[7],"tags":[143,142,89,145,144,125],"my_content_publications":[],"class_list":["post-360","type-post","status-publish","format-standard","hentry","category-web","tag-hover","tag-cufon","tag-resolved","tag-syntax","tag-theme","tag-wordpress"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"clkt_attachments":{"featured_image":null,"inline_attachments":[],"upload_candidates":[],"max_free_size":102400,"max_allowed_size":104857600},"_clkt_upload_mode":"new_only","clkt_content_hash":"402cf906fe82c0e26274accb52fa4875b07295466054819036bf0721245704f2","customFields":{"clkt_auto_upload":"0","activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":3,"activitypub_interaction_policy_quote":"","activitypub_status":"","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"processed_attachments":{"total_attachments":0,"uploaded_to_arweave":0,"kept_original_urls":0,"upload_summary":{"total":0,"uploaded":0,"failed":0,"too_large":0,"reused":0}}},"paymentAddress":"8_-tV4d15kVVq9Gd-Al2MAIC3LqNtJ_KgFol71TzxPw"}