As I explore CSS, I have created the code below to utilize a Google font that is saved on my local hard drive. The HTML file works when it's placed in the font folder, but fails to work in a different directory. It's worth mentioning that I am not using a server; I simply double-click the file after moving it to another folder.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Fonts</title>
<style>
@font-face {
font-family: 'Abel-regular';
src: url('file://G:/JavaPrgsJGD/fonts/Google-fonts/Abel/Abel-regular.ttf');
font-weight: normal;
font-style: normal;
}
</style>
<style type="text/css">
.ngs-h3 {font-family: 'Abel-regular'; font-size: 30px; color: green;}
.ngs-p {font-family: 'Abel-regular'; font-size: 20px; color: blue;}
</style>
<script>
</script>
</head>
<body>
<h3 class="ngs-h3">Technical assessment of a movie</h3>
<p class="ngs-p">
Many people see the movies and immediately after completion of the show, when asked by news channels,
they simply brush aside the movie saying, "It's a bogus movie" without realizing that what goes in for
bringing a movie to a cinema theatre for viewers, but of course, they have spent money and time to
watch a movie, they at least deserve a free opinion.
</p>
<p class="ngs-p">
However, this forum is not about personal likes and dislikes of down-to-earth movie-goer. This forum
is for students who are pursuing their technical studies in film industry. Therefore, let us concentrate
on technical aspects of a movie.
</p>
</body>
</html>
Could you help me figure out where I'm going wrong? I'd appreciate some guidance on how to deal with local files both with and without a server. Thank you. NG SHAIKH.