Cisco ISE - Guest Portal Customization - Downloadable Fonts

[Chris_Schubert]

As we move back to the office, there is a need to update our guest access.  As part of that, the look and feel needs to match the current corporate standards.   The first ask is the ability to use downloadable fonts.  I have multiple files and they are like the following, but have the company name in front.

Sans-Black.css
Sans-Black.ttf
Sans-Black.woff
Sans-Black.woff2

When I try to upload the .tff, .woff and .woff2, ISE won't do it. The CSS did upload, but it references files that aren't available on ISE.

I'm not expert in Web Design, but I'm trying to give the customers what they want with this initial web page.

The CSS has the company name on the front of the font name, but kind of like this:

@font-face {
font-family:"Sans Black";
src:url("Sans-Black.woff2") format("woff2"),url("Sans-Black.woff") format("woff"),url("Sans-Black.otf") format("opentype");
font-style:normal;font-weight:400;
}

[Arne Bier]

Hello @Chris_Schubert 

Have you tried using the JQuery ThemeRoller Mobile website? AFAIK, ISE requires version 1.3.2 of this for correct CSS support.

I have used it in the past to allow me to customise my ISE Portals for things  like button colours, rounding of edges etc. I have never tried fonts. But there seems to be a drop down for that.  You can enter a font name on that page and it renders it for you (in a preview).

Not sure if that helps. 

[Chris_Schubert]

I haven't yet, but will give it try.  I was fine before the marketing and design folks showed up to host guests.  We haven't displayed a splash page for employees for a very long time and we were fine with whatever ISE could do then, so it never has come up before now.  That said, I'd doing my best to comply.  It seems like it should be easier enough to do.

Thanks for the tip,

Chris

[Arne Bier · Accepted solution]

Oh good news. I found a way.  You are correct that ISE does not allow uploading of custom files ending in .tff etc. So I did the following:

I used a True Tyoe Font called Zado (Zado.ttf) and renamed the file Zado.png - you can upload that to ISE.

Then I used the Theme Roller to create me a .css with an easily identifyable Font name -I chose Arial.  After downloading the .zip file and extracting the the .css, I searched and replaced the word 'Arial' with 'Zado'.

Now the fun part, I am no jQuery/JavaScript guy, but I found a nice jQuery script that you can load into the Optional section of the ISE Guest Portal that makes the page use a different font family.

<script>
$("head").prepend("<style>@font-face {font-family: 'Zado';src: url('https://172.22.128.82:8443/portal/customFiles/Zado.png');}</style>"); $("#url").css("font-family", "Zado");
</script>

When I preview the page i see the font applied

[thomas]

Very creative, @Arne Bier