HEADER ADS 728X90

How To add google font using html and css | CSS tutorial | BY CodePrime

How do I add Google Fonts to HTML and CSS?,
How do I add Google Fonts to CSS?,
How do I import a font into HTML CSS?,
How do I add Google Fonts to my website?,
What is the font used on Google?,
Are Google fonts free fonts?,
How do I get Google fonts?,
Is Google Sans free?,
how to add google fonts in html,
how to add google fonts to css,
how to use google fonts,
google font api,
google fonts link,
google fonts free download,
google font cdn link css,
https //fonts.googleapis.com/css,
google fonts free download,
google fonts link,
google fonts symbols,
google fonts link for html,
futura google font,
cera pro google fonts,
google fonts cdn,
google fonts for css,codeprime, coding tutorial, how to learn coding easy way to learn coding

Hi dear welcome to "CodePrime" Blog . In this post we are going to learn How To add google font using html and css. First Creat A index.html file Copy This HTML CODE and pest it one your code editor. 2ndly creat style.css file Then Copy The CSS CODE and pest it then open the index.html file with your browser.

HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="Google-font" href="https://fonts.googleapis.com/css2?family=Lato:ital@1&family=Open+Sans:wght@300&family=Roboto&display=swap">
    <title>Google font by codeprime</title>

   

</head>
<body>

    <button>CodePrime - Bangladesh-1</button>
    <button>CodePrime - Bangladesh-2</button>
    <button>CodePrime - Bangladesh-3</button>

   
</body>
</html>

CSS CODE

@import url('https://fonts.googleapis.com/css2?family=Lato:ital@1&family=Open+Sans:wght@300&family=Roboto&display=swap');

button{
    padding: 10px 20px;
    margin: 10px 0;
    font-family: 'Roboto', sans-serif;
}
button:nth-child(1){
    font-family: 'Open Sans', sans-serif;
}
button:nth-child(2){
    font-family: 'Lato', sans-serif;
}


    body{
        background: linear-gradient(45deg, blue, white);
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 100vh;
        align-items: center;
        text-align: center;
    }

Youtube Tutorial

FLOW US ON SOCIAL MEDIA

Post a Comment

0 Comments

Join Telegram