@font-face linking issues


#1

Hello, I am trying to enable fonts I have within a prototype using the font-face option in the settings.

I received the below from a developer that according to this tutorial i should be able to drop in, but something is going wrong.

I suspect the ‘font label’ is where it is going wrong, I have tried ‘RN House Sans’ ‘RN House Sans Regular’ RNHouseSans’ RNHouseSans Regular’ and ‘RNHouseSansW01Regular’ but none of these work.

font-family: RNHouseSans;
font-weight: 400;
font-style: normal;
src: url(https://securebusiness.natwest.com/content/secure/natwest/fonts/RNHouseSansW01Regular.eot);
src: url(https://securebusiness.natwest.com/content/secure/natwest/fonts/RNHouseSansW01Regular.eot) format("eot"),
url(https://securebusiness.natwest.com/content/secure/natwest/fonts/RNHouseSansW01Regular.woff2) format("woff2"),
url(https://securebusiness.natwest.com/content/secure/natwest/fonts/RNHouseSansW01Regular.woff) format("woff"),
url(https://securebusiness.natwest.com/content/secure/natwest/fonts/RNHouseSansW01Regular.ttf) format("truetype"),
url(https://securebusiness.natwest.com/content/secure/natwest/fonts/RNHouseSansW01Regular.svg#RNHouseSansW01Regular) format("svg")

#2

Looks like you’ve got “the first half” of this set up properly. Now, how about your Font Mapping? When I first tried this out it was pretty confusing and took a good bit of tinkering to get it figured out. The documentation for RP9 looks better than I recall for RP8 but is still missing some key points in my opinion. You can refer to the web font documentation here:

i tested your @font-face in the prototype below and it works for me. Be sure to have a look at the new HTML generator I created (by duplicating the default one and naming it “HTML (font test)”):
webfont mapping.rp (106.4 KB)

https://lrwakd.axshare.com


In order for a web font to work, you must specify:

  • A “Font Family” name
    (it can be anything, and does not have to match the “font-family” property in the CSS)
    –in my example, I use “myCustomFont” which I just made up.

  • A link to either a .css or @font-face webfont
    (you can usually cut&paste this from the website that hosts the webfont)

  • A Font Mapping
    (click the Font Mappings link on the Fonts tab)

  • A local font to use as an in-editor substitute for your webfont
    (it can be any font installed on your local system; of course best if you can use the same or similar font as your webfont.)
    –in my example I use Axure Handwriting just to show it can be any local font

  • A font family name that does match the “font-family” parameter set in the first step.
    (best to cut&paste the text after “font-family:” in the @font-face source to the “Map to font family” field)

Finally, when you preview or publish your prototype, be sure to use the HTML generator that has your webfonts. You can do this in the default HTML generator or create one or several custom alternate HTML generators.


#3

Hi, thanks so much for taking the time to offer guidance.

I’ve just tested your prototype and checked on your axshare link, and the font doesn’t display in my browser? Screenshot attached. How is it that you can see font but I see serif?


#4

@drew.hunter

You are correct: the webfont did not actually work for me either. It showed the same serif font as in your screenshot–which looks like Times New Roman. I errantly just saw that the font had changed from Verdana and assumed it worked–not knowing what the RNHouseSans font actually looked like. (Duh… the “Sans” in the name should have clued me in that it would not have a serif style.)

I don’t know why this isn’t working, but it appears there must be something amiss in the @font-face code you were given. When I go to the host website it prompts for a login, but if I go any of the URLs in the code, I can download the font, so I would think the @font-face should work. I also notice the host website uses a different location for their webfonts (view the source and search for “@font-face”.)

I did Google RNHouseSans and found this source, with @font-face code:

When I apply that to my HTML generator, it does work. I updated my example in previous post, and used a true local font (Axure Handwriting) that looks very different from the intended one to better show this.


#5

Using a link to CSS isn’t working for me either. If I publish my preview locally, things work (with my local fonts) but if I use the Preview icon in the toolbar the link to the CSS file is missing, so the font face styles have nothing to reference and my fonts don’t show.

image


#6

It looks like clicking the Preview icon from an Axure library file omits the link tag that makes the fonts work. Clicking the same icon from a normal Axure file includes the link tag.

I had two such files set up with the same CSS link and font mappings. The HTML output for the library file omits this tag that was in the other output:

<link href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css" rel="stylesheet" class="d">