How to add font style?

Forum|Forum|6 years ago
July 8, 2019
3 replies
3538 views

Hi,

Can I add my own font file (* .TTF) as a resource for "Vuforia Studio" instead of an external font?
Can I use the resource font I have added?
Or is it possible to use only external fonts via unconditional URL like below?

@import url (// fonts.googleapis.com/css?family=Bowlby One);
.specialfont {
  font-family: 'Bowlby One';
}

Thanks,

Warm Regards,

SeonHo

Examples

Best answer by TomasCharvat

Hello @CHASEONHO

Maybe this will help. I prefer to store different fonts in Resources\Fonts folder:

/// Creating a new font style:
@font-face {
 font-family: digital;
 src: url('#{$resources}/Fonts/DIGITALDREAM.ttf');
}

/// Using the new font style:
.digital {
 font-family: digital;
}

Regards

Tomas

D

dupatel

5-Regular Member

@CHASEONHO Custom CSS can be added easily in the application CSS section, if you also have custom files to add to the project with the font definitions, you can upload them via the resources upload action and then reference them from the CSS file.

Adding fonts to the CSS file via CSS import should work, and one can also add fonts via javascript in the home.js file by creating the link tag with the URL to the font.

I think the 3d label widget can use the CSS fonts if they exist already in the page. See some examples about how to import fonts such from this post:

https://stackoverflow.com/questions/14676613/how-to-import-google-web-font-in-css-file

@import url('https://fonts.googleapis.com/css?family=Open+Sans')

-Durgesh

T

TomasCharvat

Answer

14-Alexandrite

Hello @CHASEONHO

Maybe this will help. I prefer to store different fonts in Resources\Fonts folder:

/// Creating a new font style:
@font-face {
 font-family: digital;
 src: url('#{$resources}/Fonts/DIGITALDREAM.ttf');
}

/// Using the new font style:
.digital {
 font-family: digital;
}

Regards

Tomas