When using Raphael.text() to render text with custom fonts loaded via @font-face, I encounter an issue with the getBBox function not returning accurate size values based on the font family. The rendered text appears correctly in the SVG with the desired font, but the width returned by getBBox is not reflective of the actual font being used.
To demonstrate the problem, consider the following pseudo code snippet:
// Loading font and injecting into stylesheets
opentype.load('someFontFamily', (err, font) => {
const path = paper.text(x, y, 'Hello World')
.attr({
'font-family': 'someFontFamily'
'font-size': 100
})
path.getBBox() // Inaccurate width returned
})
I have tried preloading the fonts using @font-face declarations before page loading, as well as using timeouts, but the issue persists. It seems like a timing problem where the font needs to be downloaded and triggered for rendering prior to SVG sizing correctly.
Is there a way to ensure that the SVG returns size values reflecting the font being displayed? Perhaps through a callback or event post-render?