To start, you must generate an array named image containing various dimensions like [64 x 64, 32 x 32, 16 x 16, 8 x 8, 4 x 4, 2 x 2, 1 x 1], and then assign it to the mipmaps parameter of the texture.
Make sure that the image used is always a square, with dimensions that are powers of 2. Each subsequent image in the array should have its dimensions reduced by half until reaching the smallest size of 1 x 1.
For your situation, a function called textImage can be created to produce text at a specific dimension and font. In other words, (text, dimension, font) => canvas where canvas is an HTMLCanvasElement. The implementation would look like this:
texture.mipmaps[0] = textImage('sampleText', 64, 'font0');
texture.mipmaps[1] = textImage('sampleText', 32, 'font1');
...
texture.mipmaps[6] = textImage('sampleText', 1, 'font6');
If you prefer not to blend the mipmaps during sampling (e.g., using different fonts for various levels), you must set the minFilter to either NearestMipMapNearestFilter or LinearMipMapNearestFilter.
(At this time, dealing with an incomplete mipmap chain is a challenge for me. Hence, I always provide a complete chain down to 1 x 1. Additionally, the image mentioned earlier does not necessarily have to be an HTMLCanvasElement. It could be any type that is acceptable as the pixels parameter for WebGL's texImage2D() function: https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texImage2D)