Embedding Google fonts into Axure 9 prototype


#1

This might have been answered but I’ve been searching for the last few hours and nothing has worked.

I’m trying to embed a google font into my prototype so when I test on mobile it shows the right font. the following two images show what I have added, can someone explain where I’ve gone wrong

https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c&display=swap" rel="stylesheet

image

image

P.S Please Axure can you make an easier process for this, I’m not a techie and this has made testing designed prototypes really hard!


#2

Try having your web URL as:

https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i

If that doesn’t work, just have it as:

https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c&;display=swap

Don’t include "rel=“stylesheet”


#3

Looks like you copy/pasted a little more than just the URL. Remove the quoted part.


#4

Hi! There are a couple of things you’ll want to adjust in the web font settings you currently have to get that font to work, the first being taking out the extra stuff that’s been pasted along with the font URL as mentioned by MattRoberts and nkrisc. When you copy the URL from Google fonts, you’ll want to copy just the URL captured between the quotation marks:

For that particular font it also looks like Google Fonts wants you to write out the font family as “M PLUS Rounded 1c” when you specify the web font, as specified in the “Specify in CSS” portion of the font info dialog. For your font, it looks like when the font is locally installed in Axure RP it renders the font name as “Rounded Mplus 1c”; in testing it looks like you can get the font to render in the browser if you use the URL above and then add a Font Mapping setting that maps “Rounded Mplus 1c” to “M PLUS Rounded 1c”. Hopefully that does the trick!
Web font sample.rp (42.7 KB)


closed #5

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.