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:
Live Demo:
See the Pen use-google-font-answer by w3resource (@w3resource) on CodePen.
Supported browser
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4