lc-soft/LCUI

Using custom fonts

TheSystemIsCorrupt opened this issue · 4 comments

TheSystemIsCorrupt commented

Hi, it's few days I found your library it's very clean, nice and smooth, thank you so much for this great library.
I was working with ultralight and qtwebengine and they are heavy for what I want and lcui is just what I needed.

I could successfully build all the lcui projects and demos and now I started to learn how it works, I couldn't find any documatiaon in english that tells how to connect ui to backend c like clicks and data syncing.

Currently i attempted to use a custom font for the page I searched in lcui-design and found out some fontface interface inside css files, I tried it but it doesn't work.

This is my file structre :
app-start.exe
app_data/style.css
app_data/main.xml
app_data/font.ttf

Here's main.xml :

<?xml version="1.0" encoding="UTF-8" ?>
<LCUI-app>
  <resource type="text/css" src="app_data\style.css"/>
  <ui>
	<w type="textview" class="big_header">Hello World</w>
  </ui>
</LCUI-app>

And here's style.css :

@font-face 
{
  font-family: 'textfont';
  src: url("font.ttf");
}

.big_header
{
	font-family: textfont;
	font-size:30px;
	color: #eeeeee;
	text-align: center;
	width:100%;
	margin-top: 20px;
}

root 
{
  font-family: textfont;
  min-width: 920px;
  min-height: 480px;
  background-color: #7940ff;
}

Application runs without any error but the font never gets applied, am I missing something?
How can I use a custom font?

TheSystemIsCorrupt commented

Same source works in firefox :
lcui-vs-firefox

<!DOCTYPE html>
<html>
	<head>
	  <link rel="stylesheet" href="app_data\style.css">
	</head>
	
	<body>
	  <ui>
		<div type="textview" class="header_text">Hello World!</div>
	  </ui>
	</body>
</html>
lc-soft commented

LCUI loads the font file specified by src in @font-face, but does not register the font with a new font-family in the font library. Therefore, you need to use the default font family name in the font file.

LCUI/src/gui/css_parser.c

Lines 1079 to 1098 in ae7d27c

static void LoadFontFile(void *arg1, void *arg2)
{
LCUIFont_LoadFile(arg1);
LCUIWidget_RefreshTextView();
}
static void OnParsedFontFace(LCUI_CSSFontFace face)
{
static int worker_id = -1;
LCUI_TaskRec task = { 0 };
task.func = LoadFontFile;
task.arg[0] = strdup2(face->src);
task.destroy_arg[0] = free;
if (worker_id > -1) {
LCUI_PostAsyncTaskTo(&task, worker_id);
} else {
worker_id = LCUI_PostAsyncTask(&task);
}
}

  • ❤️1
TheSystemIsCorrupt commented

@lc-soft thanks! Does this mean we only can have one font for our application ui?

Can you explain what you mean from :
> Therefore, you need to use the default word family name in the font file.

Let's say I have Impact.ttf and Roboto.ttf is it possible to use them both in same ui page? if yes how?

  • 👎1
TheSystemIsCorrupt commented

Oh now I get it, the font name inside the font file!
Some other note if someone seek for same thing, in html/css font path should be releative to css file but in lcui it should be relative to app/exe file.

/* Bold */
@font-face 
{
src: url("app_Data/font.ttf");
}

/* Light */
@font-face 
{
src: url("app_Data/font2.ttf");
}
  • 👍1