Change the font & color for Heading 1, 2, 3

(10 posts) (3 voices)

1. 

   brandtaylor313
   Member

   How do I change the font & color for heading 1, 2, 3 for the whole website?

   

   Attachments

   1. screenshot.jpg (122.6 KB, 1 downloads) 1 year old

   Posted 1 year ago #
2. 

   Ruderic
   Support

   Hi,

   In order to change the CSS colors, you can go to the theme folder, and open the file "header.php". In line #55, just before the </head> tag, add this code:

   <style type="text/css">
   #intro_blurb h1 {
   color: #000;
   }
   </style>

   That will change the heading color, in the intro blurb. Change the "000" color to your own hex code.

   That way, you can specify any CSS selector of the theme, and change it's properties.

   Hope that helps

   Posted 1 year ago #
3. 

   brandtaylor313
   Member

   Thank you but I also want to change the font. How do I do that?

   Posted 1 year ago #
4. 

   Ruderic
   Support

   You want to change the H1 heading of the intro section right?

   That font is generated using Cufon, so you will have to generate your own cufon file in order to change it.

   Posted 1 year ago #
5. 

   brandtaylor313
   Member

   Yes I want to change the font for H1, H2, H3 heading in the intro section to 2 different fonts. Do I need to generate my own Cufon for the 2 different fonts? Once I do that where do I insert the code? I tried to follow the tutorials to change the fonts but the fonts did not show up. Sorry I'm new to this. :)

   Posted 1 year ago #
6. 

   brandtaylor313
   Member

   I followed the instructions at https://github.com/sorccu/cufon/wiki/Usage. I generated my own Cufon for both fonts and entered the code suggested for multiple fonts into my custom.js file around line 199-200.

   Posted 1 year ago #
7. 

   Elliott
   Support

   Hello brandtaylor313,

   It looks like you got this fixed but if you have any other questions regarding Cufon then this might help, http://mysitemyway.com/support/topic/tutorial-using-cufon?message=support-forums-topic-status-updated.

   Posted 1 year ago #
8. 

   brandtaylor313
   Member

   I did not get this fixed. I did those things and they did not work. Sorry for the mis-communication. I just need to know where do I insert the code once I generate the Cufon fonts. I followed the directions in the following tutorial https://github.com/sorccu/cufon/wiki/Usage. My font is not showing up and I'm getting an error in my code. I am not sure what I should do. Please help. I entered the following code:

   <script src="cufon-yui.js" type="text/javascript"></script>
   <script src="Adobe_Garamond_Pro_400.js" type="text/javascript"></script>
   <script src="Inspiration_400.font.js" type="text/javascript"></script>
   <script type="text/javascript">
   Cufon.replace('h1', { fontFamily: 'Inspiration' });
   Cufon.replace('h2', { fontFamily: 'Inspiration' });
   Cufon.replace('h3', { fontFamily: 'Adobe Garamond Pro' });
   </script>

   Cufon.replace('h4,h5,#site_name,.dropcap1,.dropcap4,.teaser_large', { });
   Cufon.replace('#blurb,#footer_teaser_text', { textShadow: '#f9f9f9 1px 1px' });
   Cufon.replace('th,.light_gradient', {
   color: '-linear-gradient(#bbb, #888)',
   hover: 'true'
   });
   Cufon.replace('h3', {
   color: '4d4d4d'});

   Cufon.replace('h1,.staged_slide h2, .partial_staged_slide h2, .floating_slide h2, .full_slide h2, #body_block_background h2,.widgettitle,.dropcap2,.dark_gradient', {
   color: '#ff0000',
   hover: 'true',
   textShadow: '#4d4d4d 1px 1px'
   });
   Cufon.replace('.partial_gradient_slide h2', { });
   Cufon.replace('.large_button', { textShadow: '0 -1px 0 #888888' });

   Cufon.replace('.toggle_frame h4.toggle', {color: '-linear-gradient(#bbb, #888)',hover: 'false' });

   Posted 1 year ago #
9. 

   Ruderic
   Support

   Hi,

   The problem here is that Wordpress does not recognize relative paths to files.

   So, instead of:

   <script src="cufon-yui.js" type="text/javascript"></script>
   <script src="Adobe_Garamond_Pro_400.js" type="text/javascript"></script>
   <script src="Inspiration_400.font.js" type="text/javascript"></script>

   You need:

   <script src="<?php echo get_template_directory_uri(); ?>/Adobe_Garamond_Pro_400.js" type="text/javascript"></script>
   <script src="<?php echo get_template_directory_uri(); ?>/Inspiration_400.font.js" type="text/javascript"></script>

   Cufon library is already loaded by the theme, so you do not need to include it. Also, your code should be located in the file "header.php".

   Posted 1 year ago #
10. 

    brandtaylor313
    Member

    Thank you for your help. I figured out what I was doing wrong by referring to this post: http://mysitemyway.com/support/topic/adding-multiple-cufon-fonts-to-awake#post-1789.

    Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.