A to Z on how to use google fonts on your website

How to embed google font to your website
How to embed google font to your website

Adding google font to your website is very easy and simple. Follow the following procedures below to add google fonts to your website.

Find Your Preferred Google Font:

Yes, the first thing you need to do is to find your preferred google font i.e (finding the google font you would like to use on your website) and to do this, go directly to the Google font website (See Image below)

A to Z on how to use google fonts on your website
A to Z on how to use google fonts on your website

Select The Google Font:

Looking at the image above, you will see several fonts with their respective text examples, let’s say we want to use the font “Roboto” for our website. The next step to take is to select the font by left-clicking on the plus (+) sign in red beside it (See the image above).

A minimized dialog box  with title “1 Family selected” will appear directly above your system task bar, left-click on the minus (-) sign to maximize the dialog (see image below).

A to Z on how to use google fonts on your website
A to Z on how to use google fonts on your website

After maximizing the dialog box, all its details will be revealed, then under “EMBED” you will see two other options the STANDARD and @IMPORT, the links you see directly under this when any of them is selected are what we are going to use for this tutorial.

Embed the link into your website page:

In the dialog box, you will see that there are two methods of adding google fonts to your website and they are;

The Standard Method:

For me, this is the best method of adding Google fonts to your website, this is done by simply taking the font URL or font link that you got from google font website (see image below).

A to Z on how to use google fonts on your website
A to Z on how to use google fonts on your website

Copy and paste the code in-between your web-page head tags <head>Place the font link Here</head>.

To copy, first highlight the text link by placing your cursor at the beginning of the link, left-click and hold, then drag it to the end of the link.

On your keyboard press “Ctrl + C” to copy the font link and after copying the link, use “Ctrl + V” to paste it in-between your web-page head tag (see image below).

As you can see in the image below, the opening and closing tag in red block while the font link is in-between them.

A to Z on how to use google fonts on your website
A to Z on how to use google fonts on your website

The Import Method:

This is the second method of adding google font into a web-page. It requires copying the second link that appears when you click the @IMPORT in the dialog box (see image below).

You either paste this link in a stylesheet in-between the head tags or directly in a separate CSS .

A to Z on how to use google fonts on your website
A to Z on how to use google fonts on your website

Note: After pasting the font link, nothing will happen (i.e you wont see the google font) until you implement/specify the web font in the stylesheet

Specify the Google fonts in CSS (Cascading Style Sheet):

Specifying the google font in CSS is just like telling your stylesheet to use the font (Roboto) for the web page, to tell the stylesheet which font to use and this can be done in two ways (see image below).

For internal stylesheet; Copy the CSS rule in the dialog box and paste it as shown below i.e the one in red while the one in yellow was the font link you previously pasted in-between the head tag.

A to Z on how to use google fonts on your website

For External Stylesheet;

A to Z on how to use google fonts on your website
A to Z on how to use google fonts on your website

Now see the difference between the two web-pages, the first image is when the google font-family(Roboto, sans-serif) has not yet been applied and the second image is when it has been applied.

 

 

 

 

 

 

Please do not hesitate to share your own idea through the comment box, also feel free to comment.

like our facebook page @ http://www.facebook.com/ceeceecomputers

Best Font For Your Website/Blog

Choose the best font for websites
Best font for websites

The font you use on your website/blog matters a lot, it can affect  you positively or negatively. Most times you design your website/blog with certain fonts that looks so great on your website but when  your audience views the same website/blog, he/she sees something different from what you originally designed. This is simply because the font you used on your website/blog is not present in the viewers computer system/browser. Whenever the preferred font you used isn’t present on the viewers computer system/web browser, the viewers Web browser attempts to use the next font in the list (If you used more than one font i.e “Font Family”). If none of the fonts specified are found, the viewers browser displays its default font.

How Do You Know if the font you used on your website/blog is present in the viewers computer system/browser ?

Though not all fonts are available on every one’s computer system/browser but there are few fonts that are likely to be available on almost every computer system, and this fonts are called “Web Safe Fonts”.

What are “Web Safe Fonts” ?

Web Safe Fonts are the fonts that are likely to be present on a wide range of computer systems/browsers that are used by web content authors to increase the likelihood that content displays in their chosen font. So as a newbie in web-development, it will be safer to start with the Web Safe Fonts.

Ten (10) Web Safe Fonts

  • Lucida Sans
  • Arial/Helvetica
  • Tahoma
  • Times New Roman
  • Courier New
  • Verdana
  • Microsoft Sans Serif
  • Trebuchet Ms
  • Georgia
  • Comic Sans Ms

Like i said earlier, this fonts are likely to be present on a wide range of computer systems/browsers. So with any of the fonts above, your website/blog  retains its original font on almost all devices and browsers. In-case none of this fonts suits your website, i advice you to use Google Web Fonts on your website, also with google fonts, your website/blog fonts will appear on every website/blog exactly as when you designed it. If you are a newbie and you don’t know how to use Google Web Fonts.

Check this outA to Z on how to use google fonts on your website.

Choosing Font Size:

Generally, people believe that font-size of 16 pixel is ideal to be used on websites. Personally, I prefer using font size of 14 pixel, but if your website/blog is specifically meant for a target audience of individuals with reading issues, then it will be better you use font size range of 15px – 18px.

Another thing is if as a newbie, you still not sure if 14px or 16px is the right font size for your website. I suggest you visit other websites on the internet, go through their pages by viewing it both on desktop and on mobile, if you encounter any page that you like reading from, then that is the right page with the right font/font-size to choose. Imitate that particular website by using the exact font/font-size. If you don’t know how to detect the right font/font-size used on other website pages, check this out; How to detect font and font-size used on other website pages.

Note: You have to be aware that different fonts with the same font-size may look differently (In sizes) on different devices.

Finally, please don’t hesitate to share your own view on the best font and font size for websites….