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


Twitter Facebook Google LinkedIn Email Pinterest Reddit StumbleUpon Tumblr



Try these Fun Games by Bobbie:


Travel Blast Game New York


Play and Learn Russian


Battlestarship Game



Take a look at these Groovy Codes:


Fun IQ Test


Html Svg Starburst


Javascript Particles Fishes



Read the Latest Breaking Programming and Tech News, Great Articles and Tips:


Codenewz Programming and Tech News



Comments

Popular posts from this blog