One of the interesting features to beautify the blog appearance is using type fonts provided by Google Web Fonts. We can apply the new font type from Google Fonts if we feel a variety fonts that owned by Blogger still not enough. In the Google Web Fonts are available hundreds of kinds of fonts that unique and interesting. But when the HTML code provided by Google Fonts, we apply to "edit HTML" blog page and saved it, an error will occur and can not be saved.

In fact, we already copy and paste the HTML code directly that we get from Google Fonts page to "edit HTML" in Blogspot and we also perform the steps that have been instructed by Google Fonts.

An example is when we apply the HTML code fonts "Rouge Script" from the Google Font into Blogspot. For those who do not know how to get the HTML code, you can get into the Google Web Fonts, then select the desired font. Then click the "Add to Collection".


After that click the "Use" button at the bottom right, and then see point 3 contains the words "Add this code to your website:". That's the HTML code that we should apply in the edit HTML Blogspot.


As per the instructions provided by Google Web Fonts, installation of HTML code that is in part under <head> or above </ head>. Where the HTML code for the letter "Rouge Script" provided by the Google Web Fonts are as follows:

<link href='http://fonts.googleapis.com/css?family=Rouge+Script' rel='stylesheet' type='text/css'>

However, when applied to edit HTML in Blogspot and click "Save Template", an error occurs in the form of the words "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: The element type "link" must be terminated by the matching end-tag "".  The meaning is the HTML code has not been closed properly. This is an image of the error.


In order to save the template successfully, then we need to add code / before the code >, in order to cover the HTML code to be perfect and templates saved successfully. Examples of more details as follows:

Example 1:
HTML code font "Roune Script" is:

<link href='http://fonts.googleapis.com/css?family=Rouge+Script' rel='stylesheet' type='text/css'>

Should be changed to:

<link href='http://fonts.googleapis.com/css?family=Rouge+Script' rel='stylesheet' type='text/css'/>

Example 2:
HTML code font "Caesar Dressing" is:

<link href='http://fonts.googleapis.com/css?family=Caesar+Dressing' rel='stylesheet' type='text/css'>

Should be changed to:

<link href='http://fonts.googleapis.com/css?family=Caesar+Dressing' rel='stylesheet' type='text/css'/>

Notice at the end of the HTML code. Code / this needs to be added to all sorts of HTML code fonts, to be applied to edit the HTML Blogspot. After that stay easy steps "Save Template" and the installation of the Google Web Fonts you've selected to your blog is successful.

The next step to use these fonts, we just need to integrate with the CSS of our blog. Here is an example when we change the CSS of our blog using the font "Rouge Script", exactly in the title of the blog. HTML code that we changed on the "edit HTML" blog, is in red text in the code below:

<Variable name="pagetitlefont" description="Blog Title Font"
     type="font"
     default="normal normal 400% Rouge Script, Serif" value="normal normal 400% Rouge Script, Serif">

The results we got on our blog title by using the font is as shown below. It worked!

Post a Comment

 
Top

Powered by themekiller.com