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 (
    <Layout>
    <Container>
    <div>

      <small>
        Posted by {post.frontmatter.author} on {post.frontmatter.date}
      </small>
      

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


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

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