Automatically use @font-face
Posted: Mon Nov 11, 2019 5:51 pm
Hey Pablo,
Ran across an issue with setting @font-face as 'Automatically use @font-face for non web-safe fonts'. I do have generate external CSS and global styles enabled.
Very simple to reproduce:
1. Insert a text object and change it to a non web-safe font that is not a google font either.
2. Set the @font-face as above.
3. Preview
In my case, when I previewed it the font was changed to something else. The font did not show correctly. It only seemed to work when I set the text object to either 'Enable Responsive Fonts' or if the Output Format was set to 'Use <p> tags'. If Output format is only set to 'default' and you don't enable responsive fonts, it doesn't work correctly.
The html in either case is the same. Here is what that looks like:
In looking at the code, the CSS is different in each case:
Default:
With responsive fonts:
When it works, it appears the font code is applied to the text object ID rather than the ID of the <span> tag that is generated.
Ran across an issue with setting @font-face as 'Automatically use @font-face for non web-safe fonts'. I do have generate external CSS and global styles enabled.
Very simple to reproduce:
1. Insert a text object and change it to a non web-safe font that is not a google font either.
2. Set the @font-face as above.
3. Preview
In my case, when I previewed it the font was changed to something else. The font did not show correctly. It only seemed to work when I set the text object to either 'Enable Responsive Fonts' or if the Output Format was set to 'Use <p> tags'. If Output format is only set to 'default' and you don't enable responsive fonts, it doesn't work correctly.
The html in either case is the same. Here is what that looks like:
Code: Select all
<div id="wb_Text1"><span id="wb_uid0">Some text here</span></div>Default:
Code: Select all
#wb_Text1{position:absolute;left:215px;top:256px;width:399px;height:54px;text-align:center;z-index:0;}
#wb_uid0{color:#404040;font-family:Bauhaus 93;font-size:48px;}Code: Select all
#wb_Text1{color:#404040;font-family:"Bauhaus 93";font-weight:normal;font-size:48px;}
#wb_Text1{position:absolute;left:215px;top:256px;width:399px;height:54px;text-align:center;z-index:0;}
#wb_uid0{color:#404040;}