C#•10mo ago

✅ Font Families Support By Avalonia?

I have tried looking through the github repo and across google for a list of font families that the framework supports when doing <Button FontFamily="Times New Roman"></Button> but I cannot find it anywhere. Does anyone know where there is a legit list? Thanks

33 Replies

Buddy•10mo ago

Embed the font, don't directly set the font. The user must also have the font installed if you don't embed it

Mekasu0124OP•10mo ago

ok thanks for the advice, but what about the fonts that avalonia supports?

Buddy•10mo ago

https://docs.avaloniaui.net/docs/guides/styles-and-resources/how-to-use-fonts

How To Use Custom Fonts | Avalonia Docs

Customizing your Avalonia application with unique fonts can add a distinctive look and feel. This guide will walk you through the process of integrating custom fonts into your Avalonia application.

Buddy•10mo ago

Supports? It can handle all of them You embed the fonts as mentioned

Mekasu0124OP•10mo ago

what do you mean by embed them?

Buddy•10mo ago

You copy them into your resources of the csproj And that will only use the font installed on your computer so check your PCs installed fonts If another user launches your application that does not have the font installed, it will use the default font for said application. That is why it is recommended to add the font to resources within your app. That way the user does not need to have said font installed as it's loaded from memory.

Mekasu0124OP•10mo ago

ok so I have a font in /Assets/Fonts/ShadowsIntoLight-Regular.ttf. You said in the resources of the csproj so I'm assuming that is double clicking the project at the top of the solution explorer?

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>net7.0</TargetFramework>
    <Nullable>enable</Nullable>
    <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
    <ApplicationManifest>app.manifest</ApplicationManifest>
    <AvaloniaUseCompiledBindingsByDefault>false</AvaloniaUseCompiledBindingsByDefault>
    <ApplicationIcon>Assets\logo.ico</ApplicationIcon>
  </PropertyGroup>

  <ItemGroup>
    <Folder Include="Models\" />
    <AvaloniaResource Include="Assets\**" />
  </ItemGroup>

  <ItemGroup>
    <None Remove="Assets\Fonts\ShadowsIntoLight-Regular.ttf" />
  </ItemGroup>

  <ItemGroup>
    <Content Include="..\..\..\..\..\UniversalFiles\law\TermsOfService.txt" Link="TermsOfService.txt">
      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
    </Content>
    <Content Include="Assets\logo.ico" />
  </ItemGroup>


  <ItemGroup>
    <PackageReference Include="Avalonia" Version="11.0.6" />
    <PackageReference Include="Avalonia.Desktop" Version="11.0.6" />
    <PackageReference Include="Avalonia.Themes.Fluent" Version="11.0.6" />
    <PackageReference Include="Avalonia.Fonts.Inter" Version="11.0.6" />
    <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
    <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="11.0.6" />
    <PackageReference Include="Avalonia.ReactiveUI" Version="11.0.6" />
    <PackageReference Include="System.Data.SQLite" Version="1.0.118" />
  </ItemGroup>
</Project>

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>net7.0</TargetFramework>
    <Nullable>enable</Nullable>
    <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
    <ApplicationManifest>app.manifest</ApplicationManifest>
    <AvaloniaUseCompiledBindingsByDefault>false</AvaloniaUseCompiledBindingsByDefault>
    <ApplicationIcon>Assets\logo.ico</ApplicationIcon>
  </PropertyGroup>

  <ItemGroup>
    <Folder Include="Models\" />
    <AvaloniaResource Include="Assets\**" />
  </ItemGroup>

  <ItemGroup>
    <None Remove="Assets\Fonts\ShadowsIntoLight-Regular.ttf" />
  </ItemGroup>

  <ItemGroup>
    <Content Include="..\..\..\..\..\UniversalFiles\law\TermsOfService.txt" Link="TermsOfService.txt">
      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
    </Content>
    <Content Include="Assets\logo.ico" />
  </ItemGroup>


  <ItemGroup>
    <PackageReference Include="Avalonia" Version="11.0.6" />
    <PackageReference Include="Avalonia.Desktop" Version="11.0.6" />
    <PackageReference Include="Avalonia.Themes.Fluent" Version="11.0.6" />
    <PackageReference Include="Avalonia.Fonts.Inter" Version="11.0.6" />
    <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
    <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="11.0.6" />
    <PackageReference Include="Avalonia.ReactiveUI" Version="11.0.6" />
    <PackageReference Include="System.Data.SQLite" Version="1.0.118" />
  </ItemGroup>
</Project>

so here?

Buddy•10mo ago

A font in Assets folder, yes. Must also be marked as a resource Then follow the link I sent above linking to avalonia docs

Mekasu0124OP•10mo ago

Resource or AvaloniaResource?

Buddy•10mo ago

The latter

Mekasu0124OP•10mo ago

ok so I have the font at /Assets/ShadowsIntoLight-Regular.ttf. I right-clicked it and ensured that it was set to AvaloniaResource. I then wen into App.axaml and did

<Application.Resources>
  <FontFamily x:key="Shadows">avares://Assets/ShadowsIntoLight-Regular</FontFamily>
</Application.Resources>

<!-- in my view file -->
<Style Selector="Label">
    <Setter Property="Foreground" Value="DarkGray" />
    <Setter Property="FontSize" Value="20" />
    <Setter Property="FontFamily" Value="{StaticResource Shadows}" />
</Style>

<Application.Resources>
  <FontFamily x:key="Shadows">avares://Assets/ShadowsIntoLight-Regular</FontFamily>
</Application.Resources>

<!-- in my view file -->
<Style Selector="Label">
    <Setter Property="Foreground" Value="DarkGray" />
    <Setter Property="FontSize" Value="20" />
    <Setter Property="FontFamily" Value="{StaticResource Shadows}" />
</Style>

and my font didn't work.

Buddy•10mo ago

avares://GoogleFonts/Assets/Fonts#Nunito Nunito being the font name not the file name

Mekasu0124OP•10mo ago

so then I should have avares://Assets#ShadowsIntoLight-Regular?

Buddy•10mo ago

Remove -Regular That is managed by the font weight

Mekasu0124OP•10mo ago

ok now I've got

<Application.Resources>
  <FontFamily x:Key="Shadows">avares://Assets#ShadowsIntoLight</FontFamily>
</Application.Resources>

<Label FontFamily="{StaticResource Shadows}" />

<Application.Resources>
  <FontFamily x:Key="Shadows">avares://Assets#ShadowsIntoLight</FontFamily>
</Application.Resources>

<Label FontFamily="{StaticResource Shadows}" />

and it's still not working. I'm getting some sort of glyphFace error Could not create glyph Typeface

Buddy•10mo ago

I'm getting some sort of glyphFace error

Any errors or anything to show?

Mekasu0124OP•10mo ago

Buddy•10mo ago

Try to specify the font directly /Assets/Fonts/YourFont.ttf# or be more explicit avares://YourNamespace/Assets/ShadowsIntoLight-Regular.ttf

Mekasu0124OP•10mo ago

App.axaml: https://pastebin.com/i79tny2H CreateUserView.axaml: https://pastebin.com/TZYqXeXE path of image /Assets/ShadowsIntoLight.ttf I am trying everything I'm finding and what you're suggesting and it's just not working.

Buddy•10mo ago

Your path is incorrect avares://Assets/ShadowsIntoLight.ttf you are missing the namespace before Assets https://discord.com/channels/143867839282020352/1213995451393777664/1214002290445393920 As written here

MODiX•10mo ago

Buddy

Try to specify the font directly /Assets/Fonts/YourFont.ttf# or be more explicit avares://YourNamespace/Assets/ShadowsIntoLight-Regular.ttf

Quoted by

<@203166497198047232> from #Font Families Support By Avalonia? (click here)

React with ❌ to remove this embed.

Mekasu0124OP•10mo ago

that didn't work either this didn't work either

Buddy•10mo ago

Submit an issue then, if you have tried everything and followed docs by the exact Try also to update your avalonia version

Mekasu0124OP•10mo ago

ok ty avares://TrackItEarnings/Assets/Fonts#Macondo worked when I downloaded a second font to test. It works just fine so I'm assuming the problem is the font itself.

Buddy•10mo ago

I see. Hopefully the font download was just corrupted

Mekasu0124OP•10mo ago

hopefully. I'll test it later. thank you again for your help

Buddy•10mo ago

Anytime.

Mekasu0124OP•10mo ago

question then. would you happen to know how to set the bottom border color? In css it would be like

.border {
  "border-bottom": 2px solid blue;
}

.border {
  "border-bottom": 2px solid blue;
}

<Style Selector="Label">
    <Setter Property="Foreground" Value="DarkGray" />
    <Setter Property="FontSize" Value="20" />
    <Setter Property="FontFamily" Value="{StaticResource Macondo}" />
    <Setter Property="HorizontalAlignment" Value="Center" />
    <Setter Property="VerticalAlignment" Value="Center" />
</Style>

<Style Selector="Label.Title">
    <Setter Property="FontSize" Value="30" />
    <Setter Property="BorderBrush" Value="0,0,0,#24de45" />
</Style>

<Style Selector="Label">
    <Setter Property="Foreground" Value="DarkGray" />
    <Setter Property="FontSize" Value="20" />
    <Setter Property="FontFamily" Value="{StaticResource Macondo}" />
    <Setter Property="HorizontalAlignment" Value="Center" />
    <Setter Property="VerticalAlignment" Value="Center" />
</Style>

<Style Selector="Label.Title">
    <Setter Property="FontSize" Value="30" />
    <Setter Property="BorderBrush" Value="0,0,0,#24de45" />
</Style>

I'm wanting to do it on the Label.Title

Buddy•10mo ago

You can't set the colors individually from what I know of, but you can set the border thickness individually

Mekasu0124OP•10mo ago

oh ok. let me give that a shot. thanks

Buddy•10mo ago

You can write your own control that has the ability to do that

Mekasu0124OP•10mo ago

<Setter Property="BorderThickness" Value="0,0,0,2" /> this wound up being what I needed. Thank you!

Buddy•10mo ago

Anytime 🙂

Gaming

Programming

✅ Font Families Support By Avalonia?