Font Style

[telly]

Hi - I need to use a font "Poiret One"  one of my DataPage, I tried to set the style inside the header and add !important, but no luck.

Here is my screenshot of the DataPage


Also is the font that I wanted:


Thank you in advance.

[SunakoChan]

For you to be able to use that style you need to have a css file path of google. You may use this syntax(Just change the family value to the desired font):

<style>
@import url('https://fonts.googleapis.com/css?family=Poiret One');

label, .cbHTMLBlockContainer{
font-family:Poiret One!important;
}
</style>

Actual result:

[Barbie]

Hi @telly,

You may also refer tot his article: https://howto.caspio.com/styles/using-google-web-fonts/

Hope this helps.

 

-Barbie

[JolliBeng]

Hi all,

This article might also be helpful: https://stackoverflow.com/questions/14676613/how-to-import-google-web-font-in-css-file

 

~JolliBeng

[Kurumi]

Hi! Just sharing this tip. You can also use Font icons such as Font Awesome for labels.

To apply in the DataPage, follow these steps:
1. Insert Header and Footer. In the Header, insert the installation CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/js/all.min.js"></script>

2. Search your icon here: https://fontawesome.com/v5/search?o=r&m=free&s=solid
3. Copy code snippets such as <i class="fas fa-users"></i>
4. Paste the code in Labels or any HTML code where you like to add an icon.

Sample Result:

References:
- https://fontawesome.com/
- https://cdnjs.com/libraries/font-awesome

[autonumber]

Hi - Just to add, you may check the following links below on how you can customize your DataPages.

- https://www.youtube.com/watch?v=lQmKK2wrL6c

- https://www.youtube.com/watch?v=KxcEHFzk2o0

- https://www.youtube.com/watch?v=DQJscbV5prE

- https://howto.caspio.com/styles/styles/

 

[Kurumi]

Hi! In addition to having Font icons such as Font Awesome for labels, you can also apply this in the Header in the Results Page of Report DataPage.

To apply in the DataPage, follow these steps:
1. Insert Header and Footer. In the Header, insert the installation CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/js/all.min.js"></script>

2. Search your icon here: https://fontawesome.com/v5/search?o=r&m=free&s=solid
3. Copy code snippets such as <i class="fas fa-users"></i>
4. Paste the code in Labels in the Header where you like to add an icon.

Result: