How To Change and Use Fonts in Blogger-
Undoubtedly, Blogger is an amazing platform to create and manage blogs
even if you're a newbie as we can see the number of blogs raising rapidly.
Okay, everybody know this, but the most common problem with mostly every
blogger user is using perfect template for blog as it matters a lot. Template
should be user friendly, its font should be eye-friendly and easy to read, it
should also be responsive and some more features we want the template. Everybody have got any blogger template to use in their blogs either they're
beautiful or ugly but we're using them. But the main thing is content and there
font matters a lot. If you're feeling that your blog doesn't have beautiful
font than you should change the font immediately. Because in the blog, the main
thing is content or articles and if you've used any bad font that makes the
article difficult than definitely it will affect on your blog visitors and you
might loose your visitors.
Changing font is blogger is not a big deal. We've great collection of web fonts
available on Google Fonts for free from where you can pick up any font and
start using it on your blog or web. Google Fonts is one of the most popular
place for fonts and almost every website is using fonts from there because
there fonts are great and are hosted on Google servers which are really fast.
Implementing fonts in our blog is really easy, we just need to add a html link
tag below <head> which calls the font to load in our blog and use
font-family CSS property to call the font in any web element.
Don't worry, if you're a newbie and don't know how to change and use Google
Fonts in your blog because below I'm going to show you step by step that how
can we easily do that.
How To Upload and Use Custom Fonts in Blogger
Just about anyone can write and publish his or her own blog. In
fact, there are about 152 million blogs out there on the internet. But, if you
want your blog to stand out you need to impress visitors with the 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 titled is a great way to start and should be something you practice on just about everything you post; however, don't just stop there. If you really want to impress people and draw attention toward your blog, you want to start where the content all begins. You need to make use of custom fonts in Blogger. This guide will help you learn a little bit about font styles and how to upload new fonts onto your Blogger site.
Complementing your blog post with images, links, and catchy titled is a great way to start and should be something you practice on just about everything you post; however, don't just stop there. If you really want to impress people and draw attention toward your blog, you want to start where the content all begins. You need to make use of custom fonts in Blogger. This guide will help you learn a little bit about font styles and how to upload new fonts onto your Blogger site.
The Different Types of Font-
Before you can upload any font files, you need to find the right font
and typeface that will fit your style. 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 letters or
custom strokes.
· Display - typeface that is designed to stand out from the rest of the
page; characterized by a broad and unique use of informal letter designs and
transparency. Display typeface is best used on titles and headers.
Within each web browser there are also certain types of font files that are used. Most of the browsers, except Internet Explorer and the iOS browser, will use TTF font file. Internet Explorer is the only web browser service that uses EOS files, and Apple has opted for using an SVG for their mobile and tablet based products. Some custom fonts in Blogger have to be in an @Font-Face kit, but this will be discussed later on.
Removing The Existing Font-
- Go To Blogger >> Template >>
Backup Your Template
- Click Edit HTML and Search For The Following
Code
fonts.googleapis.com
- Mostly, This will be available below
<head> of the templates.
- After finding the above code, you'll see it in
the html <link> tag like the image below.
- Just remove that html link tagline.
- Save Template.
Where to Find Font
You can find custom font all over the internet
when you're ready to get started. Some custom fonts in Blogger are free to use
and can be downloaded to your computer, others you are considered 'premium' and
you have to pay to use them, so please check twice whether they are having
Commercial or Personal licenses. Google offers its own font service known as Google Web Fonts
which can be a good place to start looking around for custom fonts in Blogger.
Using the Google Web Fonts service, you run a filter to find select fonts 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 display window. If you like a couple different fonts, you can save them to your collection to come back to later.
Using the Google Web Fonts service, you run a filter to find select fonts 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 display window. If you like a couple different fonts, you can save them to your collection to come back to later.
Adding a Custom Font to Blogger from Google Web
Font
Step 1.
To browse the Google Fonts 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 the 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 fonts in 'Alphabetical order', by 'Date added', 'Number of styles' and 'Popularity':
To organize the fonts by style, you can use the menu on the 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 fonts 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) and the CSS style (point 4).
The link to style sheet would look like this:
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 this:
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 can
revert the changes back to the original in case something goes wrong.
Step 4.
Step 4.
From the same "Template" location,
press the "Edit HTML" button:
2. Installing New Font in Your Blog
- Go to Google Fonts and find the best font that you want to use.
- After choosing font, click on "Quick use" button, shown in the image below.
- Tick mark all the styles
- Scroll down and copy the html link tag code.
- Go To Blogger >> Template >> Edit HTML
- Search For <head>
- Paste The Code Below It and Save Template.
- If it gives error, try adding / before > at the end, after that ending will be like />.
- Okay, now font is installed and lets call it in our template.
- Come back to Google font page and scroll down more.
- There, you'll see the block like below.
- Copy that code and Go To Blogger >> Edit HTML
- Search for body { or body{
- There you'll see font-famiy:bla-bla-bla;
- Remove that font-family property till semicolon and paste the new one there.
- Save Template.
- If the font is not working properly now than add the following code above ]]></b:skin>
body, h1,h2,h3,h4,h5,h6 .post, .post-body, .content-wrapper, .main-wrapper, .outer-wrapper, .footer-wrapper, #content-wrapper, #main-wrapper, #footer-wrapper, #rsidebar-wrapper, .sidebar-wrapper {FONT FAMILY PROPERTY HERE!important}
- Paste the font family property in the highlighted and remove semicolon because we've added !important tag that will call the font importantly in the given areas.
- Save Template
- You're Done!
Final Keystrokes
Seems like your blog is looking awesome after installing fresh font. Hope you successfully did this through this guide as we've tried to make it step-by-step. Even if you got stuck anywhere than feel free to ask below in comments. Please leave your views in comments, share this article with your friends and keep visiting us for more easy tutorials. Have a nice day!
0 comments:
एक टिप्पणी भेजें