diff --git a/examples/vector-labels.js b/examples/vector-labels.js
index 17f0614d0e..baa746fd16 100644
--- a/examples/vector-labels.js
+++ b/examples/vector-labels.js
@@ -107,7 +107,7 @@ const createTextStyle = function (feature, resolution, dom) {
     const openSans = document.createElement('link');
     openSans.href = 'https://fonts.googleapis.com/css?family=Open+Sans';
     openSans.rel = 'stylesheet';
-    document.getElementsByTagName('head')[0].appendChild(openSans);
+    document.head.appendChild(openSans);
     openSansAdded = true;
   }
   const font = weight + ' ' + size + '/' + height + ' ' + dom.font.value;
diff --git a/src/ol/net.js b/src/ol/net.js
index 3dd14df8a3..5385992ad8 100644
--- a/src/ol/net.js
+++ b/src/ol/net.js
@@ -39,7 +39,7 @@ export function jsonp(url, callback, opt_errback, opt_callbackParam) {
     cleanup();
     callback(data);
   };
-  document.getElementsByTagName('head')[0].appendChild(script);
+  document.head.appendChild(script);
 }
 
 export class ResponseError extends Error {
diff --git a/test/browser/spec/ol/data/fonts/ubuntu-regular-webfont.woff2 b/test/browser/spec/ol/data/fonts/ubuntu-regular-webfont.woff2
new file mode 100644
index 0000000000..1ab75a4288
Binary files /dev/null and b/test/browser/spec/ol/data/fonts/ubuntu-regular-webfont.woff2 differ
diff --git a/test/browser/spec/ol/format/kml.test.js b/test/browser/spec/ol/format/kml.test.js
index fc44e39305..53035a9ad8 100644
--- a/test/browser/spec/ol/format/kml.test.js
+++ b/test/browser/spec/ol/format/kml.test.js
@@ -6,6 +6,7 @@ import GeometryCollection from '../../../../../src/ol/geom/GeometryCollection.js
 import Icon from '../../../../../src/ol/style/Icon.js';
 import IconAnchorUnits from '../../../../../src/ol/style/IconAnchorUnits.js';
 import IconOrigin from '../../../../../src/ol/style/IconOrigin.js';
+import ImageState from '../../../../../src/ol/ImageState.js';
 import KML, {
   getDefaultFillStyle,
   getDefaultImageStyle,
@@ -2323,7 +2324,7 @@ describe('ol.format.KML', function () {
           expect(f).to.be.an(Feature);
           const styleFunction = f.getStyleFunction();
           expect(styleFunction).not.to.be(undefined);
-          const styleArray = styleFunction(f, 0);
+          const styleArray = /** @type {Array<Style>} */ (styleFunction(f, 0));
           expect(styleArray).to.be.an(Array);
           expect(styleArray).to.have.length(1);
           const style = styleArray[0];
@@ -2342,11 +2343,13 @@ describe('ol.format.KML', function () {
           expect(style.getText()).to.be(getDefaultTextStyle());
           expect(style.getZIndex()).to.be(undefined);
 
-          setTimeout(function () {
-            expect(imageStyle.getSize()).to.eql([20, 20]);
-            expect(imageStyle.getScale()).to.be(1.6); // 32 / 20
-            done();
-          }, 200);
+          imageStyle.listenImageChange(function (evt) {
+            if (imageStyle.getImageState() === ImageState.LOADED) {
+              expect(imageStyle.getSize()).to.eql([20, 20]);
+              expect(imageStyle.getScale()).to.be(1.6); // 32 / 20
+              done();
+            }
+          });
         });
 
         it("can read a IconStyle's hotspot", function () {
diff --git a/test/browser/spec/ol/layer/MapboxVector.test.js b/test/browser/spec/ol/layer/MapboxVector.test.js
index 54b4a90e9e..5c3cadfbff 100644
--- a/test/browser/spec/ol/layer/MapboxVector.test.js
+++ b/test/browser/spec/ol/layer/MapboxVector.test.js
@@ -208,7 +208,7 @@ describe('ol/layer/MapboxVector', () => {
       originalFetch = fetch;
       window.fetch = function (url) {
         fetchUrl = url;
-        return Promise.resolve();
+        return Promise.resolve({ok: false});
       };
     });
     afterEach(function () {
diff --git a/test/browser/spec/ol/layer/WebGLTile.test.js b/test/browser/spec/ol/layer/WebGLTile.test.js
index d8d5a63840..bd4b8832ab 100644
--- a/test/browser/spec/ol/layer/WebGLTile.test.js
+++ b/test/browser/spec/ol/layer/WebGLTile.test.js
@@ -21,7 +21,7 @@ describe('ol/layer/WebGLTile', function () {
       source: new DataTileSource({
         loader(z, x, y) {
           return new Promise((resolve) => {
-            resolve(new ImageData(256, 256));
+            resolve(new ImageData(256, 256).data);
           });
         },
       }),
@@ -278,15 +278,15 @@ describe('ol/layer/WebGLTile', function () {
       attribute vec2 a_textureCoord;
 
       uniform mat4 u_tileTransform;
-      uniform float u_texturePixelWidth; 
-      uniform float u_texturePixelHeight; 
-      uniform float u_textureResolution; 
-      uniform float u_textureOriginX; 
-      uniform float u_textureOriginY; 
+      uniform float u_texturePixelWidth;
+      uniform float u_texturePixelHeight;
+      uniform float u_textureResolution;
+      uniform float u_textureOriginX;
+      uniform float u_textureOriginY;
       uniform float u_depth;
 
       varying vec2 v_textureCoord;
-      varying vec2 v_mapCoord; 
+      varying vec2 v_mapCoord;
 
       void main() {
         v_textureCoord = a_textureCoord;
@@ -419,7 +419,7 @@ describe('ol/layer/WebGLTile', function () {
         source: new DataTileSource({
           loader(z, x, y) {
             return new Promise((resolve) => {
-              resolve(new ImageData(256, 256));
+              resolve(new ImageData(256, 256).data);
             });
           },
         }),
@@ -434,7 +434,7 @@ describe('ol/layer/WebGLTile', function () {
         source: new DataTileSource({
           loader(z, x, y) {
             return new Promise((resolve) => {
-              resolve(new ImageData(256, 256));
+              resolve(new ImageData(256, 256).data);
             });
           },
         }),
@@ -450,7 +450,7 @@ describe('ol/layer/WebGLTile', function () {
         source: new DataTileSource({
           loader(z, x, y) {
             return new Promise((resolve) => {
-              resolve(new ImageData(256, 256));
+              resolve(new ImageData(256, 256).data);
             });
           },
         }),
@@ -589,7 +589,7 @@ describe('ol/layer/WebGLTile', function () {
     sourceless.setSource(
       new DataTileSource({
         loader(z, x, y) {
-          return new ImageData(256, 256);
+          return new ImageData(256, 256).data;
         },
       })
     );
diff --git a/test/browser/spec/ol/net.test.js b/test/browser/spec/ol/net.test.js
index 697910e431..77a3f0a35e 100644
--- a/test/browser/spec/ol/net.test.js
+++ b/test/browser/spec/ol/net.test.js
@@ -36,7 +36,7 @@ describe('ol/net', function () {
   });
 
   describe('jsonp()', function () {
-    const head = document.getElementsByTagName('head')[0];
+    const head = document.head;
     const origAppendChild = head.appendChild;
     const origCreateElement = document.createElement;
     const origSetTimeout = setTimeout;
diff --git a/test/browser/spec/ol/render/canvas/index.test.js b/test/browser/spec/ol/render/canvas/index.test.js
index b0363a9fb6..beda9432c9 100644
--- a/test/browser/spec/ol/render/canvas/index.test.js
+++ b/test/browser/spec/ol/render/canvas/index.test.js
@@ -5,7 +5,6 @@ describe('ol.render.canvas', function () {
   font.href =
     'https://fonts.googleapis.com/css?family=Abel&text=wmytzilWMYTZIL%40%23%2F%26%3F%24%2510';
   font.rel = 'stylesheet';
-  const head = document.getElementsByTagName('head')[0];
 
   describe('ol.render.canvas.registerFont()', function () {
     beforeEach(function () {
@@ -65,7 +64,7 @@ describe('ol.render.canvas', function () {
     });
 
     it('triggers redraw and clear measurements for fonts that become available', function (done) {
-      head.appendChild(font);
+      document.head.appendChild(font);
       render.checkedFonts.addEventListener(
         'propertychange',
         function onPropertyChange(e) {
@@ -75,6 +74,8 @@ describe('ol.render.canvas', function () {
           );
           expect(e.key).to.be('normal\nnormal\nAbel');
           expect(render.textHeights).to.eql({});
+
+          document.head.removeChild(font);
           done();
         }
       );
diff --git a/test/browser/spec/ol/renderer/canvas/vectorlayer.test.js b/test/browser/spec/ol/renderer/canvas/vectorlayer.test.js
index 3100001f82..ad3582cebe 100644
--- a/test/browser/spec/ol/renderer/canvas/vectorlayer.test.js
+++ b/test/browser/spec/ol/renderer/canvas/vectorlayer.test.js
@@ -18,15 +18,20 @@ import {
   getWidth,
 } from '../../../../../../src/ol/extent.js';
 import {checkedFonts} from '../../../../../../src/ol/render/canvas.js';
+import {createFontStyle} from '../../../util.js';
 import {fromExtent} from '../../../../../../src/ol/geom/Polygon.js';
 import {get as getProjection} from '../../../../../../src/ol/proj.js';
 
 describe('ol.renderer.canvas.VectorLayer', function () {
   describe('constructor', function () {
-    const head = document.getElementsByTagName('head')[0];
-    const font = document.createElement('link');
-    font.href = 'https://fonts.googleapis.com/css?family=Droid+Sans';
-    font.rel = 'stylesheet';
+    const fontFamily = 'Ubuntu - VectorLayerTest';
+    const font = createFontStyle({
+      fontFamily: fontFamily,
+      src: {
+        url: '/spec/ol/data/fonts/ubuntu-regular-webfont.woff2',
+        format: 'woff2',
+      },
+    });
 
     let target;
 
@@ -156,7 +161,7 @@ describe('ol.renderer.canvas.VectorLayer', function () {
 
     it('re-renders for fonts that become available', function (done) {
       checkedFonts.values_ = {};
-      head.appendChild(font);
+      font.add();
       const map = new Map({
         view: new View({
           center: [0, 0],
@@ -167,7 +172,7 @@ describe('ol.renderer.canvas.VectorLayer', function () {
       const layerStyle = new Style({
         text: new Text({
           text: 'layer',
-          font: '12px "Droid Sans",sans-serif',
+          font: `12px "${fontFamily}",sans-serif`,
         }),
       });
 
@@ -181,9 +186,13 @@ describe('ol.renderer.canvas.VectorLayer', function () {
       map.addLayer(layer);
       const revision = layer.getRevision();
       setTimeout(function () {
-        expect(layer.getRevision()).to.be(revision + 1);
-        head.removeChild(font);
-        done();
+        try {
+          font.remove();
+          expect(layer.getRevision()).to.be(revision + 1);
+          done();
+        } catch (e) {
+          done(e);
+        }
       }, 1600);
     });
   });
diff --git a/test/browser/spec/ol/renderer/canvas/vectortilelayer.test.js b/test/browser/spec/ol/renderer/canvas/vectortilelayer.test.js
index d2537d1f96..9b83fd8292 100644
--- a/test/browser/spec/ol/renderer/canvas/vectortilelayer.test.js
+++ b/test/browser/spec/ol/renderer/canvas/vectortilelayer.test.js
@@ -17,6 +17,7 @@ import View from '../../../../../../src/ol/View.js';
 import XYZ from '../../../../../../src/ol/source/XYZ.js';
 import {checkedFonts} from '../../../../../../src/ol/render/canvas.js';
 import {create} from '../../../../../../src/ol/transform.js';
+import {createFontStyle} from '../../../util.js';
 import {createXYZ} from '../../../../../../src/ol/tilegrid.js';
 import {getCenter} from '../../../../../../src/ol/extent.js';
 import {get as getProjection} from '../../../../../../src/ol/proj.js';
@@ -24,10 +25,14 @@ import {getUid} from '../../../../../../src/ol/util.js';
 
 describe('ol/renderer/canvas/VectorTileLayer', function () {
   describe('constructor', function () {
-    const head = document.getElementsByTagName('head')[0];
-    const font = document.createElement('link');
-    font.href = 'https://fonts.googleapis.com/css?family=Dancing+Script';
-    font.rel = 'stylesheet';
+    const fontFamily = 'Ubuntu - VectorTileLayerTest';
+    const font = createFontStyle({
+      fontFamily: fontFamily,
+      src: {
+        url: '/spec/ol/data/fonts/ubuntu-regular-webfont.woff2',
+        format: 'woff2',
+      },
+    });
 
     let map,
       layer,
@@ -200,14 +205,18 @@ describe('ol/renderer/canvas/VectorTileLayer', function () {
     it('re-renders for fonts that become available', function (done) {
       map.renderSync();
       checkedFonts.values_ = {};
-      head.appendChild(font);
-      layerStyle[0].getText().setFont('12px "Dancing Script",sans-serif');
+      font.add();
+      layerStyle[0].getText().setFont(`12px "${fontFamily}",sans-serif`);
       layer.changed();
       const revision = layer.getRevision();
       setTimeout(function () {
-        head.removeChild(font);
-        expect(layer.getRevision()).to.be(revision + 1);
-        done();
+        try {
+          font.remove();
+          expect(layer.getRevision()).to.be(revision + 1);
+          done();
+        } catch (e) {
+          done(e);
+        }
       }, 1600);
     });
 
diff --git a/test/browser/spec/util.js b/test/browser/spec/util.js
index b038b70452..dae6263197 100644
--- a/test/browser/spec/util.js
+++ b/test/browser/spec/util.js
@@ -14,3 +14,33 @@ export function overrideRAF() {
     window.cancelAnimationFrame = caf;
   };
 }
+
+export function createFontStyle(options) {
+  const styleNode = document.createElement('style');
+  const src = Array.isArray(options.src) ? options.src : [options.src];
+  function toCssSource(src) {
+    const url = typeof src === 'string' ? src : src.url;
+    const format = typeof src === 'string' ? undefined : src.format;
+    return `url('${url}')${format ? ` format('${format}')` : ''}`;
+  }
+  const ruleText = `
+    @font-face {
+      font-family: '${options.fontFamily}';
+      font-style: ${options.fontStyle || 'normal'};
+      font-weight: ${
+        options.fontWeight === undefined ? 400 : options.fontWeight
+      };
+      src: ${src.map(toCssSource).join(',\n  ')};
+    }`;
+  return {
+    add() {
+      document.head.appendChild(styleNode);
+      if (styleNode.sheet.cssRules.length === 0) {
+        styleNode.sheet.insertRule(ruleText);
+      }
+    },
+    remove() {
+      document.head.removeChild(styleNode);
+    },
+  };
+}