HTML CSS Exercise: Use Google Font

Last update on March 04 2024 06:50:47 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8><!-- Define the character encoding of the document as UTF-8 -->
<title>Use Google Font exercise</title><!-- Set the title of the HTML page -->
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'><!-- Link to the Google Fonts stylesheet for 'Indie Flower' font -->

<style type="text/css">
/* CSS styles start here */

p {
font-family: 'Indie Flower', cursive; /* Set the font family of paragraphs to 'Indie Flower', falling back to generic cursive font */
}

/* CSS styles end here */
</style>
</head>
<body>
<p>SQL tutorial of w3resource is a comprehensive tutorial to learn SQL. We have followed SQL:2003 standard of ANSI. There are hundreds of examples given in this tutorial. Output are shown with Oracle 10G. Often outputs are followed by pictorial presentation and explanation for better understanding</p><!-- Paragraph content styled with the Google Font 'Indie Flower' -->

<!--How do I
1.Go to https://www.google.com/fonts
2.Select your font
3.Click on the Left Arrow button out of tiny buttons just under the text displayed
4.Add code under '3. Add this code to your website:' within head section of your page
5.Click on the JavaScript tab and and that code just above the closing body tag of your page
6.Add 'font-family: 'Indie Flower', cursive;', replacing font name with the one you are using as shown in this page within style tags or your 
external CSS
-->

<script type="text/javascript">
  WebFontConfig = {
google: { families: [ 'Indie+Flower::latin' ] } /* Load 'Indie Flower' font with Latin character set using Web Font Loader */
  };
  (function() {
var wf = document.createElement('script'); /* Create a script element */
    wf.src = ('https:' == document.location.protocol ?'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; /* Set the source URL for the Web Font Loader */
    wf.type = 'text/javascript'; /* Set the script type */
    wf.async = 'true'; /* Set the script to load asynchronously */
var s = document.getElementsByTagName('script')[0]; /* Get the first script element */
s.parentNode.insertBefore(wf, s); /* Insert the Web Font Loader script before the first script element */
  })();
</script>
</body>
</html>

Explanation:

This HTML code loads and applies the Google Font 'Indie Flower' to a paragraph element.
The font is first linked in the head section of the HTML using a link tag, which fetches the font stylesheet from Google Fonts.
Within the style tag, the font-family property is set to 'Indie Flower' for paragraphs, with a fallback to generic cursive fonts.
Additionally, a script is included to load the font using the Web Font Loader provided by Google Fonts. This script is dynamically created and inserted into the document just before the closing body tag.
The WebFontConfig object specifies the fonts to load, in this case, 'Indie Flower' with the Latin character set.
The Web Font Loader script dynamically loads the font from the Google Fonts API asynchronously, improving page load performance.
The comments provide instructions on how to use Google Fonts, including selecting a font, obtaining the code, and adding it to a website.

Live Demo:

See the Pen use-google-font-answer by w3resource (@w3resource) on CodePen.

Supported browser


Yes	Yes	Yes	Yes	Yes