Custom Font only accessible by authenticated user

Michael Fernandez asked on October 11, 2017 00:26

Hi! I'm having an issue with adding a custom font to Kentico, in which the font will only load for a user that is logged into the admin area, otherwise, the font is inaccessible. The font files use the bulletproof font pattern in the css rules, and files are located as noted below

@font-face
{
    font-family: 'slick';
    src: url('/App_Themes/USDigitalWebSite/fonts/slick.eot');
    src: url('/App_Themes/USDigitalWebSite/fonts/slick.eot?#iefix') format('embedded-opentype'),
         url('/App_Themes/USDigitalWebSite/fonts/slick.woff') format('woff'),
         url('/App_Themes/USDigitalWebSite/fonts/slick.ttf') format('truetype'),
         url('/App_Themes/USDigitalWebSite/fonts/slick.svg#slick') format('svg');
}

I’ve also tried to place the fonts in App_Themes/Default/Custom as well, with the same results. The custom font loads while I am logged in to the admin site, but once I am logged out, the custom font becomes inaccessible no matter where the font files are located within App_Themes.

Recent Answers


Brenden Kehren answered on October 11, 2017 00:42

You need to update the path to be the correct path. For instance, I'd recommend using one of the following:

../../App_Themes/USDigitalWebsite/fonts/slick.eot {%RootDocument.AbsoluteURL%}App_Themes/USDigitalWebsite/fonts/slick.eot

The macro {%RootDocument.AbsoluteURL%} will return what you have in the domain for the site definition. So if you have "localhost" it will return http://localhost/. If you have "www.domain.com", it will return http://www.domain.com/

0 votesVote for this answer Mark as a Correct answer

Michael Fernandez answered on October 11, 2017 01:08 (last edited on October 11, 2017 01:09)

Sorry, I gave the wrong block above, I actually used the following path:

'/App_Themes/USDigitalWebSite/fonts/slick.eot'

which works if I am logged in as a user, and this:

'../App_Themes/USDigitalWebSite/fonts/slick.eot'

also works because of where the file is relative to the script that is running it.

The {%RootDocument.AbsoluteURL%} macro did not work out either.

I did more testing and the issue appears in both IE and Chrome and seems to be related to permissions, as the font only becomes available when logged into the admin account, otherwise, I get the following errors:

In IE:

CSS3111: @font-face encountered unknown error. slick.eot

In Chrome:

Failed to decode downloaded font: http://10.10.120.69/Kentico/App_Themes/USDigitalWebSite/fonts/slick.ttf

On logging out of the admin account, in both browsers, the custom font files results in the above errors, and on logging into the admin account, in both browsers, the custom font files will load normally.

Oddly, the custom font loads just fine on both Opera and Firefox.

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on October 11, 2017 01:11 (last edited on October 11, 2017 01:11)

Seems like you have your website running as a sub directory/virtual application of a main website. Might want to look at the configuration to make sure you're properly setup right. Are you accessing this locally or on a remote server?

When you say the macro didn't work, what did it render?

0 votesVote for this answer Mark as a Correct answer

Michael Fernandez answered on October 11, 2017 01:15

I am remoting into a VM, and developing from within that environment.

I should note that I've tried storing the font in various locations relative to App_Themes including

App_Themes/Default/Custom/

and

App_Themes/custom-font/fonts/

and I settled on App_Themes/<sitename> with site name being USDigitalWebSite

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on October 11, 2017 01:21

First, I'd stop moving the files around and leave them where they should be.

Secondly, confirm your site is setup properly in IIS. This is NOT the proper setup and will give you the results you're seeing.

Image Text

You need to make the website the root of the website instance. At the "Kentico10" level, right click and go to Manage website>Advanced settings. In there point the physical path to the physical path on the server. Something like C:\Websites\Kentico10\CMS or wherever the site is located. This should render you with the proper URL.

0 votesVote for this answer Mark as a Correct answer

Michael Fernandez answered on October 11, 2017 01:23

Re: The Macro. I think this may be getting somewhere. I glossed over it, as I assumed I was getting a similar result to ~/.

The ~/ syntax renders the dev server's ip address followed by Kentico so <ip>/Kentico/

So when I use the macro, this is the new error I get (this time in opera):

Access to Font at 'http://localhost/Kentico/App_Themes/USDigitalWebSite/fonts/slick.woff' from origin 'http://<ip>' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://<ip>' is therefore not allowed access. The response had HTTP status code 500.

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on October 11, 2017 01:26

Then go to the site defintion in the Sites app and review the domain. I'm willing to bet the IP is in the domain field.

0 votesVote for this answer Mark as a Correct answer

Michael Fernandez answered on October 11, 2017 01:30

The site domain name is listed as localhost, should it be something else?

0 votesVote for this answer Mark as a Correct answer

Michael Fernandez answered on October 11, 2017 01:35 (last edited on October 11, 2017 01:35)

This is my iis current setup

https://pasteboard.co/GOlQTFH.png

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on October 11, 2017 15:48

Your Kentico9 instance is setup as a virtual application nested under your main "Default Web Site". This is the reason you're seeing http://IP.Address/Kentico/app_themes/....

The root of the website in IIS is the "Default Web Site" and the Kentico app is a virtual application with /kentico appended to the main website. Your best bet is to get IIS setup properly and have Kentico as it's own website. If this isn't possible, then you should change your path to your font files to include the tilde in it like this ~/App_Themes/...

0 votesVote for this answer Mark as a Correct answer

Michael Fernandez answered on October 11, 2017 21:48

Thanks for taking the time to answer my questions, I'm really appreciative for your help!

I've setup IIS so that it is it's own site now, and loads by visiting the root of the server (no need to go to /Kentico anymore).

Image Text

Using a relative path loads fine for all sites, so long as I am logged into through /Admin in that browser. Once I log out however I get the following errors:

In Chrome: E4T:1 Failed to decode downloaded font

In Opera: Failed to decode downloaded font:

In Firefox: downloadable font: rejected by sanitizer

In IE: CSS3111: @font-face encountered unknown error.

Using the {%RootDocument.AbsoluteURL%} Macro causes different errors:

In Opera and Chrome(same while logged in): Access to Font at 'http://localhost/App_Themes/Default/Custom/slick.woff' from origin 'http://<i>' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://<ip>' is therefore not allowed access. The response had HTTP status code 404.

In Firefox (same while logged in): Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost/App_Themes/Default/Custom/slick.ttf. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). (unknown) downloadable font: download failed (font-family: "slick" style:normal weight:normal stretch:normal src index:2): bad URI or cross-site access not allowed source: http://localhost/App_Themes/Default/Custom/slick.ttf

No IE error, but the font doesn't load either.

You mentioned to leave the font files where they should be, I'm not sure where that would be, maybe that could be a factor? The files were not where I'd expect them to be based on the official docs recommendations (I should note that I'm working on an inherited project), instead it was in a folder that mirrored a css stylesheet's name in the App_Themes dir. Even then, moving the files around and changing the path loads the font as expected, as long as I am logged in as an administrator on the browser that I am viewing the page with the font on.

Does Kentico have a specific way through it's CMS UI to load custom fonts? Would moving font files and creating directories in the file explorer break anything in Kentico?

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on October 11, 2017 21:52

Sounds like you have moved your files around quite a bit, I'd verify your files are in the correct place and your CSS has the proper reference to the files. Make sure your font files are located in the /App_Themes/<Sitename>/fonts directory and then ensure your css references that spot in code. Typically we use ../../App_Themes/<sitename>/fonts... as the path.

0 votesVote for this answer Mark as a Correct answer

Michael Fernandez answered on October 11, 2017 22:21

I've got the same errors and behavior while logged in when having the files in that path as well.

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on October 11, 2017 22:23

Clear your cache on your site as well as in your browser.

0 votesVote for this answer Mark as a Correct answer

Michael Fernandez answered on October 11, 2017 22:31

I've been hard reloading the browsers and getting expected results. I've cleared the cache for the site itself under System/General, but still have the same errors and behavior. The font will still only load when the browser has a user logged in as an admin to the site.

This is a very strange issue.

0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.