Currently, I am utilizing react combined with nextjs for server-side rendering and bootstrap. Within my component, I have integrated bootstrap via a CDN:
<Head>
<title>{title}</title>
<meta charSet="utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" />
</Head>
At this point, in my navbar, I am using the Montserrat font via style jsx which is NextJS's method for altering CSS:
import Link from "next/link";
class Navbar extends React.Component {
render() {
return (
<div>
<nav
className="navbar navbar-light navbar-expand-lg fixed-top bg-secondary text-uppercase"
id="mainNav"
>
<Link href="/">
<a className="navbar-brand js-scroll-trigger ">Navbar</a>
</Link>
<button
className="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarResponsive"
aria-controls="navbarResponsive"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon" />
</button>
<div className="collapse navbar-collapse" id="navbarResponsive">
<ul className="navbar-nav ml-auto">
<li className="nav-item mx-0 mx-lg-1">
<Link href="/about">
<a className="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger">
Blog
</a>
</Link>
</li>
<li className="nav-item mx-0 mx-lg-1">
<a
className="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger"
href="#"
>
More
</a>
</li>
<li className="nav-item mx-0 mx-lg-1">
<a
className="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger"
href="#"
>
About
</a>
</li>
</ul>
</div>
</nav>
<style jsx>{`
@media (min-width: 992px) {
#mainNav {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
transition: padding-top 0.3s, padding-bottom 0.3s;
}
}
.navbar-light .navbar-brand {
color: white;
font-weight: bold;
font-family: Montserrat;
font-size: 130%;
}
.navbar-light .navbar-nav .nav-link {
color: white;
font-family: Montserrat;
font-size: 90%;
font-weight: bold;
}
.bg-secondary {
background-color: #2c3e50 !important;
}
`}</style>
</div>
);
}
}
export default Navbar;
To streamline my workflow, I've employed docker to containerize the entire project on my Mac, enabling me to seamlessly switch between operating systems as needed. While everything operates smoothly, I'm encountering an issue where fonts do not display correctly on Mac. After researching on Stackoverflow, it seems that Chrome defaults to Times New Roman if it fails to locate Google fonts. This leaves me wondering why this disparity exists since I've loaded bootstrap, assuming all fonts should be accessible, just like on Mac. Any insights or suggestions would be greatly appreciated.
Thank you in advance!