How to Use Google Font In Blogger

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.

  1. Search for fonts on Google Fonts, in this case I'm looking for Open Sans
  2. After found it, a list of font sizes will appear, for example I choose Open Sans Regular 400 (click on number 1)
  3. Then a link will appear (at number 2). Please copy all the links.
  4. Open Blogger, go to the Edit HTML in theme editor.
  5. Paste the copied link into <head><head>
  6. Look for the word "font-family" in the body {
  7. Add the font name "Open Sans" in front, for example:
  8. body {
        font-family: 'Open Sans', Roboto,Arial,sans-serif
    }
  9. 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?

1. Delete crossorigin
or
2. 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, the program 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&amp;display=swap' rel='stylesheet'>

Then add "/" to:

<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&amp;display=swap' rel='stylesheet'/>

Done.

Next Post Previous Post
No Comment
Add Comment
comment url