Integrating self-hosted webfonts doesn't work

[Japhy]

Hi,

I’m struggling with the integration of self-hosted webfonts. Here’s how an example page looks like in Axure (the webfont “A1 Serif Bold” is installed locally on my Mac):

Here’s the webfont configuration:

And here is what the same page looks like on an OS in which the font is not installed:

(you can see for yourself here: https://jk8dnh.axshare.com/home.html

Here’s the HTML that’s been created by Axure:

The font is available here: https://ppp.a1.net/css/fres/common/fonts/a1serif/a1serif_bold.ttf

What am I doing wrong here?

[nkrisc]

Two things to check:

1. Inspect the text in question in the browser. What font-family value has been applied to the text in the CSS generated by Axure? Make sure it matches the font-family name you defined in the @font-face settings.
2. Are there any errors in the browser console? Is the request for the font successful?

EDIT: Saw your link after I posted. It’s number two (look at the browser console). Your server is not responding with the font file because of the CORS settings on your server. You’ll need to modify your settings to allow the axshare domain.

[Japhy]

Thank you, integrating the COS setting into .htaccess did the trick

[mattplayford]

I am having lots of font problems cross-domain as well. Could you explain how the htaccess works?

[nkrisc]

.htaccess is the configuration file for Apache web servers. Assuming you’re using Apache as your webserver, you need to edit that file to allow cross origin request sharing for your font file. Be careful though, you can easily make your server insecure if you don’t know what you’re doing. I would do some reading first before you change anything.