Importing Fonts into Pega7
Hello Pega Supporters,
I am having some issues with importing new fonts into Pega7.
I want to add new fonts such as "Interstate-Regular" but I cant seem to get it right.
I added them in a mixin as "additional style" font-family Interstate-Regular but that did not work it gives me the default one. I am guessing Pega cant find such a font. Additionally I know that it doesn't pick up because I wrote the font-family name wrong, I tried without the hyphen, all together, spaced out, etc.
So my issue is how do I add fonts into Pega7 so I can use them in Mixins?
Thanks for any help!
Roberto
***Updated by moderator: Lochan. Removed user added #helpme tag. Apologies for confusion, shouldn't have been an end-user option.
**Moderation Team has archived post**
This post has been archived for educational purposes. Contents and links will no longer be updated. If you have the same/similar question, please write a new post.
Accepted Solution
RT
CA
This one worked. After "?" was added to the code it worked.url: ('webwb/interlight.woff?') format ('.woff').
Thanks.
Pegasystems Inc.
IN
Hi
Have you uploaded the font file in your application ?
If not, that will be the first thing you can try. Refer this old but useful help article : https://docs-previous.pega.com/how-apply-custom-font-labels-composite-portal
Pegasystems Inc.
US
Hi Roberto,
You can see our featured video at Pega Tube on How to install and use custom web fonts on Pega 7 App
The steps described in this video are much simpler and maintainable for Pega 7. I'm just outlining it for you.
1. Uploading the font files as Binary files into Pega.
2. Create a CSS snippet that includes web font files.
3. Reference the CSS in your skin rule.
4. Leverage the new font-family in your skin elements and Mixins using Other Font-Family option.
Hope this helps!
- Harish
Citi Bank
US
Hey Harish,
Thanks for the post I have a question for you though.
I followed what the video told me to do.
I downloaded the ttf files for the fonts: Interstate Regular, Interstate Light, and Helvetica Neue.
I put them in FontSquirrel and I got a CSS and the webfonts back.
I created binary files for every webfont .woff and.woff2 and I put them in the webwb directory in Pega.
Then I modified the CSS Stylesheet with the font-face in them. Added the url to be: url: ('webwb/interlight.woff?') format ('.woff').
And I saved that and uploaded it to my skin.
But I still dont see the fonts I specified in others.
Attached is the stylesheet I have did I write something wrong perhaps?
Pegasystems Inc.
US
Hi Roberto,
I haven't tried this by myself. The css file it looks fine though.
Have you added your CSS file to the "Additional CSS" tab of the skin rule?
As the custom font name isn't showing under other options, Have you just type in the font name and tried?
- Harish
Capgemini Deutschland GmbH
DE
Hi Roberto,
I had the same problem as you had. I used the developer tools of Google Chrome (press F12) which helped me to find my error.
(1) My original filename was ALSANREG.* but I saved all my files as binary files into Pega like this: ALSansWeb.eot, ALSansWeb.ttf, ALSansWeb.woff
(2) I used a CSS like this
font-family: 'ALSansWeb';
src: url('ALSANREG.eot?');
src: url('ALSANREG.eot?#iefix') format('embedded-opentype'),
url('ALSANREG.woff?') format('woff'),
url('ALSANREG.ttf?') format('truetype');
(3) The browser is unable to find the right font because the´original filename is replaced in Pega by ALSansWeb.
The solution was to fix the lines
font-family: 'ALSansWeb';
src: url('ALSansWeb.eot?');
src: url('ALSansWeb.eot?#iefix') format('embedded-opentype'),
url('ALSansWeb.woff?') format('woff'),
url('ALSansWeb.ttf?') format('truetype');
Maybe my mistake helps you to solve your problem too.
Best regards Björn
Capgemini
BR
"('webwb/interlight.woff?') format ('.woff');"
If you are using in the skin and the default path of the css of the skins is: webwb, so you don't need to inform the path webwb but only: ('interlight.woff?') format ('.woff').