CODEWITHSUNDEEP
cssreactjsfontsbootstrap-4next.js
richie4k2k
richie4k2k

Reputation: 131

Fonts working on Mac and displaying on Windows as times new roman in dev mode

I'm using react together with nextjs for SSR and boostrap. I have a component that loads bootstrap though 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>

Now in my navbar I use the font Montserrat via style jsx which is the way in nextjs to change 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;

I used docker to put on mac the whole project in container so that I can switch between os without problems since I use a macbook pro as portable working station and my desktop windows pc for my home station.

Now everything works smoothly the only difference is that the fonts aren't really showing up like on mac. I checked this problem on Stackoverflow and someone wrote that if chrome doesn't find a font from google font it puts Times new Roman as default one like I see it as well. Now I don't really get why this happens since I load bootstrap I should have all font available here like on Mac. Maybe you could help me and tell me what I should change and why this happens.

Thanks so much guys!

Upvotes: 0

Views: 799

Answers (1)

richie4k2k
richie4k2k

Reputation: 131

Montserrat was not installed on my Windows machine and I needed to import the font family in the project. I thought I did that right with nextjs.. apprently not. However it works now locally.

Upvotes: 0

Related Questions