Font styles not generating properly in preview

website-publishing
#1

I’m using the various flavors of the Roboto font (Regular, Light, Thin, etc.). In Axure, my labels that use the various fonts look as they should. When I do a preview, all my labels that use Roboto-Thin and Roboto-Light are generated with:

 font-family: 'Roboto-Regular', 'Roboto';

If I then replace the word ‘Regular’ with ‘Light’ or ‘Thin’ in my browser Console Tools, the font appears as it should (indicating that the browser recognizes the fonts).

Any thoughts on how I can fix this? I tried doing a font mapping where I specify the correct font-family, but no luck.

Would appreciate any help!

#2

Hi aguirguis,

Please first make sure that the CSS link you are using includes the various font weights for the Roboto font. Since it sounds like you’re using the Thin and Light fonts weights, as well as Regular, for example, you’ll want to make sure to click on the Customize tab on Google Fonts after selecting Roboto, and check all the different font weights you used in your project:

RobotoFont.png3078×1538 340 KB

Once you switch back to the “Embed” tab, the CSS link should update to the font weights you selected. If you selected all the font weights for Roboto, for example, the CSS link will look like this:

https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i

If you’re still having trouble getting the different font weights to show up, however, please post your .rp file here so that I could take a closer look. If you’d rather keep the file private, feel free to email that over to support@axure.com. Thanks!

#3

Thanks Jane! I believe that worked.

unlisted #4