How to change font in app?

How to change font in app?

BY 14 Mar 2017 Web Application Development

Hello, dear developers!

I’ve got a question – how to set custom font for text in my app?

This is example screen of my app:

<!DOCTYPE html>
<html class="main">
<head>
<link rel="stylesheet" href="../../lib/tau/mobile/theme/default/tau.css">
<link rel="stylesheet" href="../../css/style.css">
    <script type="text/javascript" src="../../lib/tau/mobile/js/tau.js" data-build-remove="false"></script>
	<style>
  
   .maintext {
     margin: 7%; 
  
     font-size: 90%;
     font-family: 'RobotoLight' !important;
     src: url(../../fonts/RobotoLight.ttf);
   }
 
  </style>
</head>
<body>
<div class="ui-page" id="headerLeftButtonPage">
	<div class="ui-header" data-position="fixed">
		<h1 id="categoryTitle">Biome</h1>

	</div>
	<div class="ui-content">
	<img class="headerImage" src="images/frozenriver.jpeg"></img>
		<div class="headerdescription"><b class="mainTitle">Frozen river</b><br>
		<p class="mainId">ID:11</p></div>
	<div class="maintext">

		<h3>Description</h3>
		<p>This variant of the river only spawns in ice plains biomes. The surface layer of water is frozen.</p>
		<h3>Temperature</h3>
		0.0<br>
		<h3>Feauters</h3>
	</div>
	
			<ul class="ui-listview">
		
            	<li class="ui-li-static li-has-multiline li-has-thumb">
				<img src="images/thumbnail.jpg" alt="icon" class="li-thumb">
				Ice
				<span class="li-text-sub">Tap to open this item</span>
			</li>
			
	
            	<li class="ui-li-static li-has-multiline li-has-thumb">
				<img src="images/thumbnail.jpg" alt="icon" class="li-thumb">
				Water
				<span class="li-text-sub">Cannot craft this item</span>
			</li>
			  	<li class="ui-li-static li-has-multiline li-has-thumb">
				<img src="images/thumbnail.jpg" alt="icon" class="li-thumb">
				Sand
				<span class="li-text-sub">Tap to open this item</span>
			</li>
			
			
		  	<li class="ui-li-static li-has-multiline li-has-thumb">
				<img src="images/thumbnail.jpg" alt="icon" class="li-thumb">
				Clay
				<span class="li-text-sub">Tap to open this item</span>
			</li>
			
		</ul>
	</div>
</div>
</body>
</html>

I want to use Roboto font (for example), so I downloaded it and place in the fonts folder. Then I tried to use it in my file, but it doesn’t work.

Can you help me with this problem, please? I tried a lot of solutions, but all of them doesn’t work. 

Waiting for your reply. Thank you!

Written by
Keep Reading All Posts
Announcing the Tizen Studio 6.1 Release

BY

16 Apr 2025

Tizen Studio

Read More
Announcing the Tizen Studio 6.0 Release

BY

04 Nov 2024

Tizen Studio

Read More
Announcing the Tizen Studio 5.6 Release

BY

02 Apr 2024

Tizen Studio

Read More