Using Google Font

HTML Code
<!DOCTYPE html&rt;
<html lang="en"&rt;
<head&rt;
  <meta charset="UTF-8"&rt;
  <meta name="viewport" content="width=device-width, initial-scale=1.0"&rt;
  <meta http-equiv="X-UA-Compatible" content="ie=edge"&rt;
  <title&rt;Add Google Fonts</title&rt;
  <!-- use google font --&rt;
  <link href="https://fonts.googleapis.com/css?family=Lora:400,700|Ubuntu:400,700" rel="stylesheet"&rt;
  <!-- import main css --&rt;
  <link rel="stylesheet" href="css/main.css"&rt;
</head&rt;
<body&rt;
  <div class="container"&rt;
    <h1&rt;Using Google Font</h1&rt;
    <p&rt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum obcaecati ducimus at animi ipsam et explicabo. Minima quidem vero, modi impedit illo saepe eum perferendis error, facere quam inventore dolorum.</p&rt;
  </div&rt;
</body&rt;
</html&rt;

CSS Code
.container {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 15px;
}

h1 {
  font-family: 'Lora', serif;
  font-weight: 400;
  color: red;
}

p {
  font-family: 'Ubuntu', sans-serif;
  color: #333;
  font-weight: 700;
}

Video Tutorial

Share this

Related Posts