Web fonts & Font Mapping

#21

Can someone update this, all the images are broken.

#22

Hey gothate,

I’m not seeing any broken images–are they still appearing as broken for you? If so, are you referring to the screenshots from Paul’s original post in this thread?

Update: Ah, looks like I have a cached version of this thread, which is why I didn’t see the problem at first. I am, however, seeing the same issue you described in a different browser. Thanks for the heads up! We’ll look into this and get it fixed.

Update: Alright, this should be all fixed up now! :slight_smile:

#23

What’s up with Axure spitting out weird CSS for fonts?

I can’t get fonts to show up properly on Chrome. Firefox seems to generate the proper fonts for now, but this used to work for Chrome, and I haven’t changed any of my font settings.

Attaching screenshots of code Axure is spitting out. Not sure why it’s selecting weights of 400 and 600, since my font doesn’t have that available, and I don’t have that weight selected anywhere.



#24

Hi Erick,

Macs handle fonts in a particular way, so font weight conversions are a bit of an inexact science. Because of this, the best solution is to use web fonts and font mapping when an exact match is necessary.

For your situation, you’d want to use the font mapping feature to map your font to its font-family (Museo Sans 700) and the font-weight 700. That should take care of things so you don’t see unexpected weights in the output.

#25

Hello,

Im not sure if this belongs here or as a new post.

I have successfully gotten Font-Awsome onto my computer’s Font folder as well as into my Axure Library. I have no problem with them rendering or using them in my prototypes, screens etc.

The issue I am having is in the “Widget Interactions” and the “Condition Builder”. Font-Awesome appears as blank squares. This is problematic when i want to perform an interaction based on the “icon”.

For example, if text = “^” then set widget to “true”.

I have seen lots of “blank square” issues, but none that address the font-awesome not appearing in the Condition Builder.

Thanks in advance!

fa.png920×354 57.9 KB


fa.png1226×472 20.9 KB


#26

Hi trillaggee,

Thanks for following up on this. Currently I’m afraid rendering the icons in the conditional builder isn’t supported, but we’ve logged similar feature requests lately, and yours definitely hasn’t gone unnoticed. Though interactions seem to be correctly governed by the copied-and-pasted icon in the condition, showing an actual representation of the icon in the condition builder isn’t available at the moment. We’ll look into this!

#27

Thank you for responding!

Has a suggestion of having the font-awesome item “pop up” on a hoverover in the “Conditional Builder” and/or “Widget Interactions”?

Essentially the same functionality that is in the “Widget Manager”.

#28

Hi trillaggee,

Not off the top of my head, but it seems we’ve got a similar discussion going on in a related Feature Request thread: [Feature Request] Support webfont rendering in Interactions Panel

Nonetheless, I’ll log your request here–thanks!

#29

Hi. I’m trying to follow this tutorial, but Google seems to have changed its system, to the point where Step #4 no longer works.

The picture shows me clicking an icon with a downward pointing arrow on the Google site to download a local copy of the font that I can use in Axure. However, there are two problems with that:

  1. Google is urging me not to use the “Google Fonts” URL from Step 1, instead giving me a popup that says “A new version of Google Fonts is available. Take me there.” If I go to the new URL, there is no Download button like the one in step 4.

  2. If I instead stay on the “old” page and click that Download icon, I get this popup message:

Download Fonts message.png724×343 14.5 KB

In case that image doesn’t display correctly, the text says:

Download fonts

You do not need to download the font to use it on your webpages. Instead, refer to the “Use” section.
There are no fonts in your Collection yet.
Sync Google fonts to your desktop using SkyFonts
Download all font families, including source files, at the Google Fonts Github project

There doesn’t seem to be a section on that page called “Use.”

I thought I should try SkyFonts, AKA Fonts.com, but heading off there, I got even more confused, trying to follow steps from this tutorial:
10 steps to get Web Fonts in your Axure 7 prototype |

Unfortunately, step 2 of that tutorial is “2. Create a project within your account,” and I can’t find any kind of “create a project” action on the Fonts.com site

By now, I had wandered so far from these instructions that I thought I should come back here and ask: Is there an update? Is there some new way I can follow the intention of step 4 on this page?

Thanks in advance.

#30

Hi there,

Thanks for pointing out this step here as well. I see what you mean, and I’ll log this discrepancy for our team to update. For now, I’ll include a couple screenshots below:

First, try adding the font to your collection, here:

Screenshot | Add to Collection

Then click Use or Review in the bottom pane, for the Collection entry:

Screenshot | Review/Use

Afterward, when you click the down-arrow button to download, an option to download a zipped archive ought to be presented in the pop-up.

Hope this helps!

#31

15-AUG-2016 FOLLOW-UP: THIS NO LONGER WORKS.

It looks like the steps below won’t work anymore.

The steps involve going to “www.google.com/fonts” rather than “fonts.google.com.” However, that first URL now simply forwards you to the second URL.

I’ll leave the steps below intact, in case they are helpful in some other way.

Wow! Okay, I think you found a tricky path to the correct branch off the old fonts page, but it seems to work. It looks to me like these are the steps to take:

How to download a Google font, without using SkyFonts:

  1. Use the old Google Fonts page: http://www.google.com/fonts/

It will offer you a link which you have to ignore:


The link says: “A new version of Google Fonts is available. Take me there.”
And the link takes you to https://fonts.google.com/
Don’t click the link.

  1. Search for a font.

  2. (staying on the old version of the font site) Click “Add to Collection”:
    2016-08-02_1518 - alexkuo’s library

Don’t click the “Quick Use” button at this point, or you won’t be offered a chance to download the zip. You will instead end up getting a popup message that says “You do not need to download the font…” that looks like this:


(Note: That version of the popup does not let you download a zip file.)

  1. Having added the font to your collection, you can click either the Review or Use buttons at the bottom of the screen:
    2016-08-02_1528 - alexkuo’s library

  2. Whichever button you clicked, it will take you to a page where you can find an Arrow button that means Download. It’ll be there, somewhere toward the top right. When you click the arrow, you will still get a popup that says “You do not need to download the font…”
    However, you’ll now see 3 choices rather than 2, the first choice being an option to download the zip file.


  1. What to do after downloading the zip? My experience is that I then:
  • move the font into the C:\Windows\Fonts folder,
  • double-click it, then
  • choose Install.

When I skipped the “choose Install” step, the font DIDN’T show up, in either Microsoft Word or Axure.
When I performed the “choose Install” step, the font DID show up, in both Microsoft Word and Axure.

I’m going to try a few more tests, with double-clicking fonts that aren’t yet in the C:\Windows\Fonts folder, and with moving fonts originally obtained thru SkyFonts to the C:\Windows\Fonts folder. I don’t know if I should first copy the font, “uninstall” it, etc.

So far, this is my working hypothesis:

Windows can consider a font “installed” even if it is not in the C:\Windows\Fonts folder.
Axure, however, will not. Axure needs the font to both be “installed” and be in the C:\Windows\Fonts folder.

#32

I have a quick follow-up detail, for anyone who might be using SkyFonts. I suppose this might pertain to certain others who have a font on their system that’s not showing up in Axure.

BEFORE:
When I downloaded fonts using default SkyFonts functionality, the font was downloaded to this folder:
C:\Users[myUsername]\AppData\Roaming\Monotype\skyfonts-google

but it also showed up, as installed, in this folder:
C:\Windows\Fonts

Under those conditions, the font didn’t appear in Axure’s dropdowns.

AFTER:
I left everything the same, except that I dragged the fonts I wanted from the first folder to the second folder.

i.e., I dragged them from this folder:
C:\Users[myUsername]\AppData\Roaming\Monotype\skyfonts-google

into this folder:
C:\Windows\Fonts

Windows balked a bit, giving me an “Install Font” popup, telling me each font was already installed, asking “Do you want to replace it?”

I said yes.

When the process was through, everything still looked the same as “Before.” i.e., The fonts still appeared in both folders!

Also, when I opened Axure, the font was right there in the dropdown, just as surely as Arial or Courier New.

So, that’s probably the end of my quest for now, but I hope I shared enough detail for the guy who googles for “Axure can’t read fonts installed with SkyFonts” or “Axure can’t use Google fonts, etc.”

#33

This worked like a charm! Thanks

#34

Thanks, just saw this. Recently getting some weird issues with the latest Axure. Just wanted to chime in on this and say “BEEN THERE. DONE THAT.” Still got wonky code. It would become “750” instead of “700” weights. Also, from MAC to WIN, depending who’s doing our QA and what platform they were on, it would show up as Times Roman or Arial. I gave up and used ARIAL for everything and had my team hate me for that.

Haven’t been experiencing this issue lately because I went to Sketch, Principle and Flinto, but am back to using Axure since the latest updates. If anything shows up, I’ll chime in, but that’s for the reply!!! :slight_smile:

#35

Is there a way to add “2 web font” in the prototype?

#36

Embedding is possible and look at the first screen shot by Paul or click on ‘Publish’ button within Axure then you will get a prompt with load of options, select Web Fonts from the left and define name, URL then click on ‘+’ and repeat the process.

#37

Hi group,

I’ve encountered a problem. I used default fonts Arial and Helvetica, both are sans-serif fonts, when I made my Axure prototype on my iMac in the first place. Now my prototype is like a hundred pages or around.

However, I found this system default font Arial is replaced by a serif font when it is previewed on my colleague’s MacBook pro. It is quite confusing to me, how can a default font be replaced?..(can anyone explain this to me?:confused:) My solution, as offered in this forum, is to embed Quicksand, a free font from Google online hosted fonts. Problem solved!:smiley: However …

The sans-serif-font-replaced-by-serif-font problem occurs again when I fail to access VPN accidentally.:frowning: In my current region, Google service is censored and blocked. Only VPN can help skipping the censorship. Which means, the prototype is messed up with totally different font styles on my client side.

[i][u]Why are the default fonts replaced?

How to make sure that the default font is not replaced by a totally differently font style? I mean, if the Arial font has to be replaced by another font, at least it should be some sans-serif font such as Helvetica, but why a serif font:confused:?

Is there an online hosted Helvetica font out there somewhere? Is there a way to replace all the Arial font with Helvetica?

If the prototype fails to access to Google hosted fonts, can I set up a second callback font to my prototype, like in css, font-family: quicksand, helvetica, roboto, arial?[/u][/i]

And do you have some recommendations for free online hosted none-English fonts?

Thanks in advance.:slight_smile:

#38

I’ve tried so many ways and fishmi222’s solution works!! Big thanks to fishmi222! :bow:

#39

I’ve struggled with this too when trying to use a custom icon font. (I created the font with Glyphter)
I tried to host it on a public server and link to the css and it wouldn’t render on machines without the font installed. The only way I’ve gotten these custom icon fonts to work is using the @font-face option, converting my font file to base64 and pasting it all inside the code area.
Here is an easy converter that worked well. Just make sure you declare your base64 code with the type of font file you used when you convertred it. (i.e. ttf or woff)
https://www.giftofspeed.com/base64-encoder/

unlisted #41