Use Google Font In Blogger or Blogspot Tutorial

By /

Google Font Blogger

How to Use or Include Google Fonts in Blogger – Google Fonts are font collections maintained by Google.

We can use the font for free, either by entering the stylesheet link or by downloading the font file.This time I will share how to easily add Google Fonts to Blogger.

  • Search for fonts on Google Fonts, in this case I’m looking for Open Sans
  • After found it, a list of font sizes will appear, for example I choose Open Sans Regular 400 (click on number 1)
Use Google Font In Blogger or Blogspot Tutorial
  • Then a link will appear (at number 2). Please copy all the links.
  • Open Blogger, go to the Edit HTML in theme editor.
  • Paste the copied link after “<head>”
  • Look for the word “font-family” in the body {
  • Add the font name “Open Sans” in front, for example:
body {
    font-family: 'Open Sans', Roboto,Arial,sans-serif
}
  • Save it.

If there is an error that occurs:

A. Attribute name “crossorigin” associated with an element type “link” must be followed by the ‘ = ‘ character

How to Fix It?

  • Delete crossorigin

or

  • Write crossorigin=” “

B. The reference to entity “display” must end with the ‘;’ delimiter.

How to Fix It?

For example, an error occurs on the link :
https://fonts.googleapis.com/css2?family=Open+Sans&display=swap

Then we have to change the character “&” before “display” to “&amp;”. Until it becomes:
https://fonts.googleapis.com/css2?family=Open+Sans&amp;display=swap

C. The element type “link” must be terminated by the matching end-tag “</link>”

How to Fix It?

Add “/” before “>”.

For example, default line is:

<link href='https://fonts.googleapis.com' rel='preconnect'>
<link crossorigin='' href='https://fonts.gstatic.com' rel='preconnect'>
<link href='https://fonts.googleapis.com/css2?family=Open+Sans&display=swap' rel='stylesheet'>

Then add “/” to the link and like this:

<link href='https://fonts.googleapis.com' rel='preconnect'/>
<link crossorigin='' href='https://fonts.gstatic.com' rel='preconnect'/>
<link href='https://fonts.googleapis.com/css2?family=Open+Sans&display=swap' rel='stylesheet'/>

Done. I hope this article is useful.

Related Posts

Scroll to Top