@font-face linking issues

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.

1 Like