Using google fonts and icons in website

 <!DOCTYPE html>

<html>

    <head>

        <title>Google fonts and icons</title>

        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

        <style>

            @import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Tangerine&display=swap');

h1{

    font-family: 'Courgette', cursive;

}

p{

    font-family: 'Tangerine', cursive;

    font-size:30px;

    word-spacing:10px;

}

.material-icons{

    color:blue;

}

#call{

    color:white;

    background-color:blue;

    width:50px;

    height:50px;

    text-align: center;

    border-radius:25px;

    vertical-align:middle;

    top:3px;

    font-size:39px;

}

        </style>

    </head>

    <body bgcolor="pink">

        <span class="material-icons">

home

</span>

<p>

<span class="material-icons"id="call">

call


</span></p>

    <h1>I am using Google fonts first time</h1>

        <p>Google fonts are crazy. </p>

    </body>

</html>


OUTPUT




Comments