Tengo este pequeño proyecto en el que inyecto un widget meteorológico en el calendario de Google. Deseo usar una fuente de Google con el widget. Mi intento con un paquete npm (confirmaciones anteriores) funcionó bien en Chrome (en una Mac), pero no en la tableta Chromebook en la que quiero usarlo.
Luego cambié de táctica para inyectar una etiqueta de enlace como esta
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) ...¿Esto también funciona en Chrome pero no en el Chromebook?
No es que sea relevante, pero lo estoy escribiendo en mecanografiado y usando vite con un complemento para construirlo. Si desea usarlo, debe crear un archivo .env
.env
VITE_API_KEY=<your openweathermap api key> VITE_LAT=<your lattitude> VITE_LON=<your longitude> ejecute yarn build y cargue la carpeta dist como una extensión local en Chrome .
Establecer la fuente personalizada mediante el estilo en línea en cada bloque parece funcionar 👍
(Haciendo font-family: inherit; no funcionó)