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!


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


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.***

SyntaxEditor Code Snippet

@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:

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


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.***

SyntaxEditor Code Snippet

@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

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

SyntaxEditor Code Snippet

@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