I'm currently using Sublime 3 for coding in HTML and CSS.
After saving the files with the proper extensions, I included the Google Fonts to use the "Lobster" font. However, upon opening the .html file on Google Chrome, the Lobster font doesn't display properly. Surprisingly, when I tried running the same code on Codepen, it worked perfectly fine. My operating system is Windows XP. I also attempted running the code on my laptop, which runs on Windows 10 and has an updated version of Chrome, yet the issue persists.
The strange thing is that the code works perfectly within the Stack Overflow editor environment as well.
.nav-pills {
font-family: Lobster;
font-size: 2.2em;
background-color:black;
}<!doctype html>
<html>
<head>
<title>Puneeth</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lobster" />
<link rel="stylesheet" href="portfolio.css" />
</head>
<body>
<div class="container-fluid">
<ul class="nav nav-pills">
<li><a href="#">Puneeth S</a></li>
<li class="pull-right"><a href="#">Contact</a></li>
<li class="pull-right"><a href="#">Portolio</a></li>
<li class="pull-right"><a href="#">About</a></li>
<li class="pull-right"><a href="#">Home</a></li>
</ul>
</div>
</body>
</html>