Greek characters in circuit drawings creating alignment problems

[abbycross]

URL to the relevant documentation

Once the page is live, the URL will be https://docs.quantum-computing.ibm.com/verify/simulate-with-qiskit-primitives (will merge in this PR) See https://docs.quantum.ibm.com/build/circuit-visualization#draw-a-quantum-circuit

Please describe the UI problem.

Circuit drawings on this page aren't completely aligned correctly. Under Parameterized circuit with Estimator, the drawing in the old Qiskit docs shows this

But in our docs it shows as this

The problem seems to be the theta character.

The problem is similar in the analogous Sampler section

[javabster]

This is an issue bc ibm plex doesnt have a font for greek characters, so in browser it defaults to a different font which throws off the spacing

[frankharkins]

From Abby's screenshot, it seems the old Qiskit docs used a fallback with the correct spacing. We might be able to find that font and use it here.

[Eric-Arellano]

This is now fixed through changes in closed source.

There were two issues:

1. For QuantumCircuit.draw(), Qiskit returns both HTML and plain text. The app was preferring the HTML, but its formatting doesn't work well with the web app. We now use the plain text
2. Next.js was using a fallback font of Arial for characters that aren't in IBM Plex Mono. We turned that off and now fallback to a monospace font.