![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](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAWWOC_hAtMkjT9KoH3Pr1bL419mGV5tKZwyJrh0qT0IO3-I_19i9QnI8bEdz3TOXxAQhxRxm3-b4hx27ywJ7uqSl4fUIJKtt13z00XHyuEAP5XOYloXwrpcNg5-OVGrd3iiFt7aarKduxxWORq3-IXf2L3UFLIVdrq3iYPXhlcSiAlptLoO5p8m85cQ/s1600/photo_2022-05-30_20-21-15.jpg)
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;
}
0 Comments