Embedded Fonts Not Displaying Properly


#1

I’ve been trying for some time now to embed both Google web fonts as well as a purchased and hosted fonts.com web font in an axure prototype however I cannot get them to display as expected. I am attaching a .rp file that I’ve used as a test the display.

All of the fonts display fine when I am viewing but these fonts are installed on my computer so I can understand this. When I try viewing from another device or computer, I am only seeing certain weights of certain google web fonts displaying correctly and none of the fonts.com web fonts are displaying as expected.

Please provide me with some advice or help as this has been an issue that I have been trying to resolve for quite some time.

fonts-test.rp (118.8 KB)

Thanks,
Mike


#2

I ran into the same issue when using Roboto; I just explicitly called all of the font weights in my CSS link:

As for the fonts.com one, try setting the link to https://


#3

Thank you. That seemed to work for all of the Google fonts except the Tajawal. It appears that there are specific font faces for this font rather than font-weights. I was not able to get this to work so any suggestions here would be helpful. Also, after changing the “http” to secure “https” the Frutiger font also seems to be displaying correctly now.

Thanks Again,
Mike


#4

Hi! I took a look at the file and tested out the Tajawal font, and it looks like you should be able to get these to render properly if you use font mapping to specify which font weight the font should render as. It looks like the locally installed font for most of Tajawal uses different font family names than what’s listed in the CSS link (e.g. “Tajawal ExtraBold” instead of “Tajawal”); to help get those to correctly pull the correct font info, you can map those specific typefaces to “Tajawal” with the appropriate weight:

The web font URL that works with the above is:

https://fonts.googleapis.com/css?family=Tajawal:200,300,400,500,700,800,900

Hopefully that helps!


unlisted #5