Got this little project where I inject a weather widget into google calendar. I wish to use a google font with the widget. My attempt with an npm package (previous commits) worked fine in chrome (on a mac), but not on the chromebook tablet that I want to use it on.

I then changed tactic to inject a link tag like this

console.log('Weather widget extension for google calendar executing')

document.addEventListener('DOMContentLoaded', function(event) {
  console.log({ event })

  const linkElement = document.createElement('link')
  linkElement.rel = 'stylesheet'
  linkElement.href = 'https://fonts.googleapis.com/css?family=Gemunu+Libre'
  document.head.appendChild(linkElement)
  console.log({ linkElement })

  const mainDiv = document.createElement('div')
  mainDiv.className = 'weather-widget__main'
  mainDiv.setAttribute(
    'style',
    `position: absolute;
  z-index: 1000;
  right: 20px;
  bottom: 20px;
  background: linear-gradient(145deg, #024acf0a, #0721d74f);
  opacity: 70%;
  padding: 10px;
  border: 1px solid #0721d74f;
  box-shadow: 0px 0px 10px #0721d74f;
  border-radius: 10px;
  font-family: Gemunu Libre, Roboto;
`
  )
  document.body.appendChild(mainDiv)
...

this also works in chrome but not on the chromebook?

Not that it is relevant but I'm writing it in typescript and using vite with a plugin to build it. If you want to use it you have make a .env file

.env

VITE_API_KEY=<your openweathermap api key>
VITE_LAT=<your lattitude>
VITE_LON=<your longitude>

run yarn build and load the dist folder as a local extension in chrome.

Solution

Setting the custom font by inline styling in each block seem to do the trick 👍

(Doing font-family: inherit; did not work)