Adding Custom Fonts to Blogger can improve the look and feel of your blog. Before getting into font embedding lets know how this works.
In your templates you can use any font you want, but these would be properly displayed only if the viewer has those fonts installed on his/her System. Font embedding Techniques allows you to use any font on your Blog and these fonts will be view-able to the viewers even if they don’t have the font installed in their Systems.
You can see a list of available Fonts at the Google Font Directory .
You can see a list of available Fonts at the Google Font Directory .
1. Select any font and then copy its Embed Code provided by Google.
2. Now go to your Blogger Dashboard > Template > Edit HTML page.
3. Find <head> and immediately below that line paste the Embed Code and edit it by changing '>' at the end of the code to '/>' (i.e, /css'/>)
4. Save your template.
You can also add multiple custom fonts in your template. When you use multiple Custom Fonts, then there is no need to add the Google CSS embed codes multiple times.You can load multiple fonts using a single line of code. For example if you are planning to use 3 custom Fonts Tangerine, Inconsolata, Droid Sans, then you can load all these three fonts using a single embed code
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans"/>i.e, just separate the multiple fonts by a '|' (line= shift + \ )
Now to apply these fonts on your template, you can use these in your template CSS. For example you may use something like:
h3.post-title {font-family: 'Tangerine', serif;}
#header h1 {font-family: 'Inconsolata', serif;}
.sidebar h2 {font-family: 'Droid Sans', serif;}
If you have any doubts regarding Font Embedding, please let me know via the comments and I will try to help you out.
0 comments:
Post a Comment