How Can I Set Google Fonts To P Elements Using CSS

Posted By Bajarangi soft , Posted On 02-11-2020

In CSS If we do not want to use any of the standard fonts in HTML, we can use the Google Fonts API to add hundreds of other fonts to your page.So today we discuss how to do it.

How Can I Set Google Fonts To P Elements Using CSS

Step 1:Create index.html file and implement as below code in it.

<p class="p1">am p element paragraph.</p>
<p class="p2">am another p element paragraph.</p>

Step 2:Implement CSS code as below to set google font.

<style>
    body {
        background: #2e9ad0;
        font-family: "Sofia";
        font-size: 22px;
    }

</style>

Complete Code For Setting Google Fonts To P Elements Using CSS.

<!DOCTYPE html>
<html>
<head>
    <title>How Can I Set Google Fonts To P Elements Using CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
</head>
<style>
    body {
        background: #2e9ad0;
        font-family: "Sofia";
        font-size: 22px;
    }

</style>
<body>
<br/><br/>
<div class="container">
    <br><br><br>
    <div class="text-center">
        <h1 id="color" style="color: white;">Set Google Fonts To P Elements Using CSS</h1>
    </div>
    <br>
    <div class="well">
        <p class="p1">am p element paragraph.</p>
        <p class="p2">am another p element paragraph.</p>
    </div>
    <br>
</div>
</body>
</html>