Use of Web Fonts

buddn07 shared this question 7 years ago
Answered

Is there any way that I can include Google Web fonts in my prototype?


http://www.google.com/webfonts/


I know that they can be linked to using HTML in the CSS code, but was unsure if I could link to them in the prototype so that the clients could view with the fonts without having to download them.

Best Answer
photo

You can use Google fonts in your prototypes as well as custom fonts. Just select the Text widget and look to the top properties bar or the properties palette. You'll then see a button to add Google fonts.

52889e67b954faab0334dc85f8e3e5b1

Then, you can select which Google Fonts to add.

388925d10b0c47ec4f159f3b7377d09b

Comments (22)

photo
1

They're not supported right now. But we'll try to include them in Usernote asap. Thanks!

photo
1

Hi,


Is there an ETA on this?


Thanks.

photo
1

I'm afraid this has been delayed. Hopefully we will include that by the end of this year.

photo
1

Is there a way to hookup custom CSS for self-hosted web fonts to the published output? Maybe via a plugin?

photo
1

Any update to this? We'd like to use Google Web fonts

photo
1

Hi Jamie,


It is included in the upcoming version 5.6 release. We have been testing it and hopefully we can launch it this month.

photo
1

It looks like this has been included in the new version, which is very exciting!


It doesn't appear that all of the fonts are there, however. I'm specifically looking for Lato (light and regular), but not seeing it in the selections. Any way it can be included in the fonts?

photo
1

Hi Jesse,


If you open the font list and click on "add google fonts", you will find Lato. It includes all the styles. Just select and install it and you will be able to use in all your prototypes!


c311ef32b22ebb82ce17fec7f3583a60


Best regards.

photo
1

That would seem to be the way to go, but it's not there for me...


3ffac0fb62ddf1836cfb06ffd3d63eb8

photo
1

Okay, got it worked out. The problem was that Lato was already installed on my machine, so I couldn't double-install it.


The solution:


Step 1: Quit Justinmind


Step 2: Delete Lato from my Fonts folder


Step 3: Reopen Justinmind.


Ta-da! Lato is available in the Google fonts list.

photo
1

Hi Jesse,


yes, it is the solution if you have a font installed with the same name.


Best regards.

photo
1

Hi,


I'm using Open Sans in my prototype and it looks pretty well when I export the prototype to Usernote in all the computers with this font installed, however it is replaced by Times New Roman in the computers that don't have it.


Is there a way to avoid this problem? Or to use Arial instead of Times New Roman as the default font type?


Many thanks

photo
1

Hi,


The easiest way would be to find the font in Google Fonts. That way you make sure the font is properly shown in all computers.


If this isn't an option let us know and we will figure something out.


Best,


Marc

photo
1

+1 TypeKit support

photo
1

Hi Jay,


I'll notify the development team about your request to support TypeKit.


Unfortunately this won't be available for the next software update but we will notify you when we know in which version this will be available.


Best,


Marc

photo
1

I'm using Open Sans in my prototype. I made sure to remove all instances of the font on my computer, but when I sync I'm missing a few weights. Additionally, when I publish the prototype to my account, the fonts are replaced with Arial.

photo
1

I'm also requesting a support for embeded custom webfonts in with multibrowser support (so that I can add all fonts to the project ifself - see how Webflow product does it)

photo
1

Hi Bart,


We are happy to inform that this bug has been fixed in version 6.5.1.


The conflict between local and google fonts is now resolved. If needed, download an install the google font again and the problem should disappear.


Regards,


Lidia

photo
1

You can use Google fonts in your prototypes as well as custom fonts. Just select the Text widget and look to the top properties bar or the properties palette. You'll then see a button to add Google fonts.

52889e67b954faab0334dc85f8e3e5b1

Then, you can select which Google Fonts to add.

388925d10b0c47ec4f159f3b7377d09b

photo
1

I tried to use google font ( poppins) and I got this error. this font in Photoshop still work

/ARXfR3Hhexx5AAAAAElFTkSuQmCC/2qPAAAAABJRU5ErkJggg==

photo
1

Can you explain more about the error? Is there a dialog? What does it say?

photo
1

I tried to user font Poppins for the text "Upcoming", but it shows like this on the screen.

when I run the simulation, it is right "Upcoming" text

photo