How to style dangerouslySetInnerHTML in gatsby blog

What are the ways to style dangerouslySetInnerHTML in a gatsby site?

I tried to add in CSS in directly but it does not render the whole page. For example, if I set all the font to montserrat, only some of the text will get rendered to montserrat, others will remain systemUI.

Here is the code I have:

import React from 'react'
import Link from 'gatsby-link'
import { graphql } from 'gatsby'
import Layout from '../components/layout'

import 'bootstrap/dist/css/bootstrap.css'
import Container from 'react-bootstrap/Container'
// import Row from 'react-bootstrap/Row'
// import Col from 'react-bootstrap/Col'

export default function Template({ data }) {
  const post = data.markdownRemark

  return (

        Posted by {} on {}

      <div dangerouslySetInnerHTML={{ __html: post.html }} />

      <hr />
      <Link to="/" style={{
        padding: 0,
      }}>Go Back</Link>

export const postQuery = graphql`
  query BlogPostByPath($path: String!) {
    markdownRemark(frontmatter: { path: { eq: $path } }) {
      frontmatter {