Is there a way to include a true type font in the exported html?

Diego Pau shared this question 6 years ago
Answered

Is there a way to include a true type font in the exported html?. I am using a diferent font type and i want to export an html and be able to upload it to the internet without losing the font!!

Comments (28)

photo
1

Hi Diego,


Some fonts are copyright protected and you need to pay royalties in order to use them. That's the reason why we do not include true type fonts in our prototypes.


Please go ahead and customize the exported HTML (best exported without optimization). Depending on the browser you can use the CSS3 property "font-face" or use typekit (https://typekit.com/ ).

photo
1

Hi Burk,


Would JIM consider adding the ability to include true type fonts in the exported html? We are developing prototypes that use external fonts which we have licensed and would like to not have to manually modify the exported code or install the fonts on every clients machine.

photo
1

Just to clarify, the use of typekit IS supported? I just embedded my typekit code in the HTML code, but doesn't seem to work...

photo
1

Has anyone successfully added typekit support in a mockup in Prototyper? The HTML Widget will allow anything to be added, but seems only to act within that widget's boundaries, where you'd expect Typekit's fonts to be available throughout the mockup...


I guess the real question is - how can you add HTML to the element (or even the element of the prototype manually? And then, once you've done this, how do you handle the 'font-family:' designation for all fonts on the prototype (since you have to select a font for each Label, RichText and Input element)?


Any help or suggestions are greatly appreciated! We'd like to use our standard corporate font for prototypes, but not everyone has it installed locally.

photo
1

We have the same demand, We use fonts from fonts.com

photo
1

+1 TypeKit support

photo
1

+1 — I would love to use FontAwesome for icons, but lack of font embedding makes this impossible without resorting to downloading and hand-coding prototypes. That said, I suspect we're whistling in the wind, because this question is marked "Answered," which means it's most likely dead.

photo
1

+1 FontAwesome

photo
1

+1 FontAwesome

photo
1

It's in the oven. It'll be ready on a couple of days.

photo
1

Awesome, thanks guys!

photo
1

Here you go. You can try this new library of 479 icons from FontAwesome ready to use with Justinmind:


http://d2ld3he4yll0xl.cloudfront.net/...


This article explains how to install such kind of libraries in Justinmind:


http://www.justinmind.com/support/imp...


Please give us feedback!

photo
1

Here you go. You can try this new library of 479 icons from FontAwesome ready to use with Justinmind:


http://d2ld3he4yll0xl.cloudfront.net/...


This article explains how to install such kind of libraries in Justinmind:


http://www.justinmind.com/support/imp...


Please give us feedback!

photo
1

Here you go. You can try this new library of 479 icons from FontAwesome ready to use with Justinmind:


http://d2ld3he4yll0xl.cloudfront.net/...


This article explains how to install such kind of libraries in Justinmind:


http://www.justinmind.com/support/imp...


Please give us feedback!

photo
1

Feedback:

1. This is excellent. Thank you. You just made this page unnecessary (and its siblings, 72px-black-trans and 72px-blue-trans), which I created so that I would have a ready source for image-based FontAwesome icons.

2. The icons are hard to see: Icons are #383838, panel background is #484A4F; would recommend white icons, if possible.

3. Search would be a great help: Scrolling is time-consuming (clicking on the track only moves one "line" up or down, see http://en.wikipedia.org/wiki/Fitts's_law).

photo
1

I went ahead and created a version of FontAwesome.jpl with white icons.


Here it is in action:


In case you're curious, I made the icons with ImageMagick and the following command:


for f in *.png; do convert ( $f -modulate 100,0,0 -auto-level -negate -alpha copy ) -background "#FFFFFF" -alpha shape ../images/$f; done


The images were located in a folder called "images-dark" that was in the same folder as "images". The current working directory was "images-dark".

photo
1

Awesome! Thanks for sharing! Have you tried the library yet?

photo
1

[I sent you an updated copy of your amazing library with white icons: did I accidentally delete that comment, or did you hide/remove it?]

photo
1

FontAwesome is now available in our web site http://www.justinmind.com/widgets

photo
1

How do I get support for the original font I used in the prototype?

photo
1

Hi Mane,


What kind of support do you need?


Best,


Sonia Durán

photo
1

Hi Sonia,


I used to fonts that don't appear in the HTML (Sacramento & Montserrat). I need support on how to change the HTML to include the fonts. Or how to choose alternative fonts without having to change them one by one on the prototyping tool.


Also, I wanted to include that the fonts are both google fonts

photo
1

Hi Mane,


Could you please let me know if you are using the fonts included at Justinmind or have you installed this fonts on your computer? The HTML will only include the fonts that have been used at Justinmind.


Best,


Sonia Durán

photo
1

Hi!


Could you please clarify whether it is possible to include desktop font in html. If not then why don't you make such fonts unavailable in justinmind?

photo
1

Hi Serge,


Unfortunately the only fonts that will be available to export to html will be the ones that have a small red F on its left at the dropdown list.


Best,


Sonia Durán

photo
1

I have the same problem, the exported html doesn't contain true font style.


First I install new font in my laptop, then in justinmind the font is installed too, I succesfully use the font when I creat the prototype in justinmind, but when I export the html, and open the html file, the font is different with the prototype that I made.


Please help me.

photo
1

As I understand you can use only Google fonts so they will remain the same in HTML.

photo
1

Hi Artha,


Are you opening the html file in the same device where the font has been installed?


Best,


Sonia Durán