Font embedding with @font-face (Axure 7 Web Fonts)

Axure RP 8
2

You will have to make sure you get the syntax of the @font-face tag right. Here is an example from Google Fonts:
http://fonts.googleapis.com/css?family=Merriweather%20Sans:400,300

Using the second tag there:
@font-face {
font-family: ‘Merriweather Sans’;
font-style: normal;
font-weight: 400;
src: local(‘Merriweather Sans Regular’), local(‘MerriweatherSans-Regular’), url(http://themes.googleusercontent.com/static/fonts/merriweathersans/v3/AKu1CjQ4qnV8MUltkAX3sL2aU247V0zTzydO4RoO9Ok.woff) format(‘woff’);
}

The opening ‘{’ and closing ‘}’ braces are already there so just add the bold portion.

  1. Add a new Web Font

  2. Select Web Font, name it and switch to @font-face

  3. Copy appropriate CSS from a hosted Web Font

  4. Make sure the font-family: property matches the Font name you want to use

Should be as simple as that!

See It Live: WebFontAtFontFace
RP File: FontMappingAtFontFace.rp (55 KB)

1 Like