Just about anyone can write his or her own blog. In fact there are about 152 millions blog out there on internet. But if you want your blog to stand out you need to impress visitors with little things. You need to be able to catch there attention and keep it so that they want to come back.
Complementing your blog post with images, links and catchy title is a great way to start and should be something you practice on just above everything you post. However, don't just stop there. If you really want to impress people and draw attention toward your blog, you should start where the all content begin. You need to make use of custom fonts in blogger. This guide will help you learn a little bit about styles and how to upload new fonts on to your blog free.
For example, If i would want to add the "Rancho" font to the posts and comments titles, i will paste the CSS style like this:
Note: Change the size of your font, add the "font-size: 28px" value to make the font bigger/smaller.
You can also add the same CSS to "Template" > press the "Customize" button the right side, navigate to "Advanced" > "Add CSS" tab and paste the CSS code in the empty box.
Step 8. Finally press the "Save Template" button and you are all set !
Complementing your blog post with images, links and catchy title is a great way to start and should be something you practice on just above everything you post. However, don't just stop there. If you really want to impress people and draw attention toward your blog, you should start where the all content begin. You need to make use of custom fonts in blogger. This guide will help you learn a little bit about styles and how to upload new fonts on to your blog free.
The Different Types Of Fonts
Before you can upload any font files, You need to find the right font and typeface that will fit your blog. Typeface is the design and symbols used for the letters; font is the actual characters. Some of the most common typeface terms that you should probably be familiar with before starting are :
- Serif - distinguished by small decorative lines that are attached to the end of letter strokes; best used for the paragraph or body content.
- Sans-serif - modern looking letter strokes that lack the decorate lines at the end; instead the letter end abruptly.
- Script - a handwriting typeface that looks like cursive letter or custom strokes.
- Display - typeface that is designed to stand out from the rest of the page; characterize by a broad and unique use of informal letter designs and transparency. Display typeface is best used on titles and headers.
Where To Find Fonts ?
You can find customs fonts all over the internet when you are ready to get started. Some custom fonts in Blogger are free to use and can be downloaded to your computer. Other you are considered "Premium" and you have to pay to use them, So please check twice whether they are having commercial or personal license. Google offers its own font service known as Google Web Fonts which can be good place to start looking around for custom fonts in Blogger.
Using the Google Web Fonts service, you run a filter to find select font based on width, thickness and slant. Better yet, you can test out how using the custom fonts in blogger would appear by modifying the size, and viewing it in a small window. If you like to couple different fonts, you can save them to your collection to come back to later.
Adding A Custom Font To Blogger From Google Web Fonts
Step 1. To browse the Google Font library, access www.google.com/webfonts/ . There are 650 font families in the collection right now, and they keep adding more, so you may want to sort them.
To organize the fonts by style, you can use the menu on left side. The top menu lets you to add and preview your own text using the "Preview Text" field. From the same menu, you can pick the "Size" and sort the font in "Alphabetical Order" , by "Date Added" , "Number Of Styles" and "Popularity".
Step 2. Once you decided what font you want to use. Click on the "Add To Collection" button and then hit the "Use" tab. This will take you to the "Almost Done !"page that will give you a link to the style sheet found in the "Standard Tab" (Point 3) add the CSS style (Point 4)
The link to style sheet would look like this:
<link href='http://fonts.googleapis.com/css?family=FONTNAME' rel='stylesheet' type='text/css'>And the CSS style would look like:
font-family:'FONTNAME',cursive;
Step 3. Now that you have selected the fonts and have a general understanding of the different types of fonts available, you can head over to your Blogger blog. Open up the dashboard and make sure that the first thing you do is to create a backup of your template: go to template and press the "Backup/Restore" button on the upper right side. That way, you revert the changes back to the original in case of something goes wrong.
Step 4. From the same "Template" location, press the "Edit HTML" button:
Step 5. Click anywhere in the code area and press CTRL + F at the same time to open the blogger search box and type <b:skin> inside the search box. Press Enter and it will take you to the <b:skin> tag, which will be highlighted in yellow.
Step 6. Directly above the <b:skin> tag, copy and paste the link to the style sheet provided by Google Web Fonts (Step 2). To prevent any errors, add a forward slash ( / ) right before the closing angle bracket ( > ) like this:
<link href='http://fonts.googleapis.com/css?family=FONTNAME' rel='stylesheet' type='text/css'/>Step 7. To apply the font on a specific part of your blog, we'll need to find the CSS selector and add the CSS style ( Point 4 ) just after the curly brackets.
For example, If i would want to add the "Rancho" font to the posts and comments titles, i will paste the CSS style like this:
h3.post-title, .comments h4 { font-family: 'Rancho', cursive; font-size: 28px; }Where "h3.post-title, .comments h4 {" is the class selector for the post and comments titles.
Note: Change the size of your font, add the "font-size: 28px" value to make the font bigger/smaller.
You can also add the same CSS to "Template" > press the "Customize" button the right side, navigate to "Advanced" > "Add CSS" tab and paste the CSS code in the empty box.
Step 8. Finally press the "Save Template" button and you are all set !