Changing the Heading Font Styles

Some people quickly get tired of the default font in their blog headings.  Changing this font is quick and easy.  All one has to do is copy and paste a section of code.  There is a large variety of font types to choose from, and one must also decide whether to make your font serif or sans-serif.  Serif fonts have little tails, which make the font look more fancy.  Sans-serif fonts are more simple looking, because they do not have these little tails.  Sans-serif fonts are recommended for electronic documents, because they are easier to read.  However, serif fonts are acceptable for use in headings in order to make the document look better.  This entire process will take about 5 minutes, and  a computer with internet access is needed in order to complete this instruction set. 

Screencast Tutorial

Step 1: Acquiring Heading Font Code

Step 1.1: Copy the code found at this link.

Note: You should not copy the note at the bottom of the code.

Step 2: Applying the Code

Step 2.1: Go to the blog that is being modified.

Step 2.2: Place the cursor over the Design tab.

 

rsz_screenshot.jpgStep 2.3: Select Templates from the drop-down menu.

Step 2.4: Click on Stylesheet under the Index Templates section.

phpDlnMraAM.jpgWARNING: Be extremely careful when navigating within the Stylesheet template.  If any of the code gets changed besides what will be pasted in, it can cause considerable changes to the blog. 


Step 2.5: Scroll to the bottom of the code on the Edit Template page.

Step 2.6: Paste the code that was copied there.

Step 2.7: Scroll to the bottom of the page.

Step 2.8: Click Save and Publish. 

Step 3: Changing Font Styles

Step 3.1: Go to the code that was pasted in the Stylesheet.

Step 3.2: To Change the page title, highlight century gothic in the line of code in the brackets immediately after the "h1#page-title". 

rsz_fontedit_001.jpg

Step 3.3: Change this to the name of the desired font.  A table of common fonts and their types is shown below.

rsz_screenshot5.jpg 

Step 3.4: Change between serif and sans-serif in the code immediately following the font name, in order to correspond with the chosen font.

 

rsz_screenshot2.jpgStep 3.5: To change the page heading font, highlight the code in the brackets following the "a".

 

rsz_screenshot3.jpgStep 3.6: Change this to the name of the desired font.

Step 3.7: Change between serif and sans-serif in the code immediately following the font name, in order to correspond with the chosen font.

NOTE: When changing font names that are more than one word, single quotes must be put around the font name within the code. 

Concluding Remarks

After all of these steps have been completed successfully, the changes made to the blog headings will be visible. These changes will show the chosen font in each of the headings.


No TrackBacks

TrackBack URL: https://blogs.psu.edu/mt4/mt-tb.cgi/128914

4 Comments

Introduction - change past to paste

Step 1 - specify which part of the code to copy

The screenshot - it's hard to read. Allow people to blow it up.

Provide some example fonts. I had to go research fonts on Wikipedia.

In step 6 - "You also have to change between..." - try to reword this sentence.

Stephanie Penatzer contributed to the above comment.

Thanks, now my blog has more to offer than just the usual ordinary default font. It's smart (if you want to catch people's eyes and get higher click through rates) to change up the font a bit and get some uniqueness to things.

Thanks, now my blog has more to offer than just the usual ordinary default font. It's smart (if you want to catch people's eyes and get higher click through rates) to change up the font a bit and get some uniqueness to things.

Leave a comment