How to add a new font-family

  

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;
}
Solution

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

Solution

Justin Babel wrote:

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, 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!