Issue with custom fonts in Service Portal

yundlu316
Kilo Guru

Our team is trying to use two different fonts in our Service Portal.  This is what we did:

1) We downloaded the two font zip files we wanted to incorporate from Font Squirrel.

2) We attached both of the files to our Theme page via the paperclip icon at the top of the page:

find_real_file.png

3) We took note of both of their sysIDs and created a new CSS Include at the bottom of the Theme page.

4) From the CSS Include menu, we created a new Style Sheet with the following CSS:

@font-face {
   font-family:'permian-slab';
   src: url('/sys_attachment.do?sys_id=9243fabfdb44330047bd90c7db96194f');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family:'open-sans';
   src: url('/sys_attachment.do?sys_id=ca4632f3db84330047bd90c7db96197d');
   font-weight: normal;
   font-style: normal;
}

body {
	font-family: 'open-sans';
}

h1, h2, h3, .panel-heading {
  font-family:'permian-slab';
}

When we load the page, everything in the body appears to be using "permian-slab" even though we specified that it should be "open-sans".  Any ideas what's going on here?  I should note that the permian slab files in the zip were all .otf files while all the files in the open sans zip were all ttf.  Thanks.

4 REPLIES 4

Calvaresi E_
Giga Expert

Hi yundlu316,

my advice is to add the format to the css, in the attribute of the url, like this:
format('truetype') - in case of .ttf.

Let me know if it helps

 

Hi, do you know if attaching a zip file is bad practice?  Instead of uploading the entire zip, I just uploaded one ttf file within the open sans zip and now it seems to work...

scottl
Kilo Sage

I got it working that way... However the attachments on your CSS record are zip files, which might be the problem.

@font-face {
	font-family: 'Proxima Nova';
	src: url('6c00e19f4fa49300ba3a9dde0310c75f.iix?#iefix') format('embedded-opentype');
	src: url('8100e19f4fa49300ba3a9dde0310c7a4.iix') format('woff');
	src: url('7000e19f4fa49300ba3a9dde0310c764.iix') format('truetype');
	font-weight: normal;
	font-style: normal;
}

 

find_real_file.png

 

However after the Madrid upgrade, this has broken. The login page doesn't load the fonts in the background and asks to download it everytime.

I'm still looking for a fix... 

Instead of adding the font as a zip file you can use this tool

https://www.font-converter.net/en/css-embedded-font-base64

 

to convert it to embedded font. Just copy the generated css code into your style. This is working in Madrid and New York.