[APM] Safari font render: Ligatures are rendered as normal, but it forces certain letters together

[formgeist]

Kibana version: master
Safari: 13.0.4

Summary

Safari runs a different CSS prop for rendering ligatures in fonts, specifically in our Roboto Mono font that we use for a any code text copy in the UI.

Profiles is rendered with fi snapped together

vs. how it should render Profiles

If I add this CSS prop, it'll fix the issue (as shown above)

font-variant-ligatures: no-common-ligatures;

[elasticmachine]

Pinging @elastic/apm-ui (Team:apm)

[sorenlouv]

I couldn't find any mentions of Roboto Mono in the APM codebase. Is this something that should be fixed globally - perhaps by EUI?

[formgeist]

@sqren I must've thought I saw that we had changed our variables to Roboto Mono to follow EUI, but we haven't (yet).

https://github.com/elastic/kibana/blob/master/x-pack/legacy/plugins/apm/public/style/variables.ts#L34-L36

I think we could update our variables file at the very least to render Roboto Mono instead of San Francisco Mono, and then perhaps look at replacing our code font instances with possibly the EuiCodeFont variable?