How to use Google Fonts
How to use Google Fonts
*Featured Code submitted and Created by Brunnhilde(OFFLINE)
HTML with CSS and JavaScript
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
<title>Google Fonts</title>
<style>p, ol {font-family: 'Indie Flower', cursive;}
h1{font-family: 'Gloria Hallelujah', cursive;}
body{background-color:#EF5350;color:white;}
a:hover{background-color:#FFCDD2 ;}
a:visited{color:#B71C1C;}
</style>
</head>
<body>
<h1>How to Use Google Fonts</h1>
<p>Google Fonts offers a wide variety of fonts to choose for your website. The only problem I had (at first) was adding it to my webpage;I didn't know how. I now understand how to add any of the fonts to my website. Let me show you how....</p>
<p><ol>
<li>Go to <a href="https://fonts.google.com/"> Google Fonts</a>.</li>
<li>Choose a font of your choice by clicking the plus sign at the top right of the "text box".</li>
<li>Click on the family selected box.</li>
<li>Copy the code <i><b>into the head of the HTML document</b></i>.</li>
<li>Copy the CSS rule(s) into the CSS document.</li>
</ol>
<button onclick="myFunction()">CLICK ME!</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt;
var r = confirm("Press any button!");
if (r == true) {
txt = "Thanks for viewing!";
} else {
txt = "Bye Bye!";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
Click here to run this Code
Share with Friends
Comments
Post a Comment