In the Patterns_SilkUI theme style sheet, there is the base font-family code like this below.
By default, it appears the theme includes not only the 3 font-family in the CSS but, when you Cntrl-Space you get a short list of additional fonts.
HOWEVER, the font that I need is not in the list. I need the "OCR A Std" font or one of the other "OCR" font-family. BUT, I can't figure out how OutSystems includes font-family URLs, etc.
I really need to add "OCR A" or "OCR Extended" font to my app - how do I do it?
SyntaxEditor Code Snippet
html, body, a, select, fieldset, input, button, select, textarea, optgroup, option { font-family: Arial, Helvetica, sans-serif; }
Hi Bruce,
Download the font from online and add it in the resources tab.
From there you will add a font-face in your style sheet like this:
@font-face { font-family: 'Myriad-Pro-Semibold-Condensed'; src: url('/fonts/Myriad-Pro-Semibold-Condensed.eot'); src: url('fonts/Myriad-Pro-Semibold-Condensed.eot?iefix') format('eot'), url('fonts/Myriad-Pro-Semibold-Condensed.woff') format('woff'), url('fonts/Myriad-Pro-Semibold-Condensed.ttf') format('truetype'), url('fonts/Myriad-Pro-Semibold-Condensed.svg#webfontpQgNQDw9') format('svg'); font-weight: normal; font-style: normal; }
From there you can reference the imported font using the font-family: '...' name you gave it like this:
a { font-family: 'Myriad-Pro-Semibold-Condensed', sans-serif; }
Let me know if you have any issues,
Justin
Justin Babel wrote:
Justin, I found the .ttf file on my computer so I uploaded it to Resources. The font-family name was VERY picky ... I had to make it the exact same name as the font was called inside the .ttf file ... but, in the end it works.
Thanks!
Hello guys,
I get confused, because when I import my font to resources it does not have the format as you mentiond:
fonts/FONTNAME.***
my format is just:
FONTNAME.***
@font-face { font-family: 'iranyekanregular'; src: url('iranyekanregular-webfont.eot'); src: url('iranyekanregular-webfont.eot?#iefix') format('embedded-opentype'), url('iranyekanregular-webfont.woff2') format('woff2'), url('iranyekanregular-webfont.woff') format('woff'), url('iranyekanregular-webfont.svg#iranyekanregular') format('svg'); font-weight: normal; font-style: normal;
and when I use FONTFACE it does not apply my font.
also , I want to use a RTL font.
could you guys help me to fix that?!
thanks in advance
Alaj
Amin Alaj wrote:
Hi Amin,
Make sure you set the Deploy Action property of the font to
Deploy to Target Directory
Then in the Target Directory, set the folder name where your font will be deployed to.
I also included my epsacename in font's URL
@font-face { font-family: 'dotsfont'; src: url('/<eSpaceName>/fonts/dotsfont.eot'); src: url('/<eSpaceName>/fonts/dotsfont.eot?#iefix') format('embedded-opentype'), url('/<eSpaceName>/fonts/dotsfont.woff') format('woff'), url('/<eSpaceName>/fonts/dotsfont.ttf') format('TrueType'), url('/OwnerBuilder/fonts/dotsfont.svg#dotsfontregular') format('svg'); }
Got this solution from the following links;
https://www.outsystems.com/forums/discussion/21469/font-not-working-in-webpage/
https://www.outsystems.com/help/servicestudio/9.0/default.htm#Managing_Resources/About_Resources.htm
Hope this helps.
Regards,
Ruby