How to apply custom font (font is in qrc) to some part of html content in WebEngineView
?
1 Answer
I figured out how to use my custom font (but I'm not sure how safe is this):
- Add custom font to qrc:
://res/font/myfont.ttf
; Create
style.css
in qrc with this content:@font-face { font-family: myfont; src: url('qrc:/res/font/myfont.ttf'); font-weight: bold; } body { font-family: 'myfont'; text-align: justify; line-height: 25px; }
In QML when content loaded to
WebEngineView
add yourstyle.css
to HTML:WebEngineView { id: webEngineView onLoadingChanged: { if (loadRequest.status == WebEngineView.LoadSucceededStatus) { webEngineView.runJavaScript( "var headHTML = document.documentElement.getElementsByTagName('head')[0].innerHTML;" + "headHTML += '<link rel=\"stylesheet\" href=\"qrc:/css/styles.css\">';" + "document.documentElement.getElementsByTagName('head')[0].innerHTML = headHTML;" ); } } }
And last, run your app with this command line argument
--disable-web-security
*View
you cannot edit content, only viewing. Or, as a workaround you can get page html code, change it and set it by callingWebEngineView.loadHtml()
WebEngineView.loadHtml()
. I can use custom font from QML like this:TextArea { font.family: "myFont" }
. And it's working. The problem is how to use this font from HTML content using CSS in WebEngineView?