After struggling with a persistent problem for quite some time, I decided to delete my initial question since I was already utilizing Bootstrap. However, I am facing an issue where my custom fonts are not being loaded even though my main.css and bootstrap.css are loading properly during page debugging. Here is a snippet of the code:
main.css
@font-face {
font-family: 'Arvo';
url("../fonts/custom/Arvo-Regular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
For bootstrap.css - I have customized it on their site to include my custom font
And in my index.html file
<!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">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/main.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
Despite making the aforementioned modifications, my Chrome Debugger still fails to load my custom font and leaves me bewildered. I have perused through various threads but none seem to offer a solution that works.
UPDATES