WPF Custom Fonts is not showing on the Design Window

I'm working on a WPF application using C#. So far, I have added a custom font using a ResourceDictionary on my application. When I run the app I can see the font works fine, but on the Design tab of my XAML it always shows the default font. Could I be missing something to set my designer correctly?

App.xaml

<Application x:Class="Bali.Chat.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:Bali.Chat"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Styles/Fonts.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Fonts.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <FontFamily x:Key="LatoRegular">pack://application;,,,/Fonts/#Lato Regular</FontFamily>
    <FontFamily x:Key="LatoThin">pack://application;,,,/Fonts/#Lato Thin</FontFamily>
    
</ResourceDictionary>

MainWindow.xaml

<Window x:Class="Bali.Chat.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Bali.Chat"
        mc:Ignorable="d"
        Icon="Images/Logo/logo-small.png"
        WindowStyle="None"
        AllowsTransparency="True"
        Title="Bali Chat"
        Height="250" Width="400">
    <StackPanel>
        <TextBlock Text="Default Font!" FontSize="40" />
        <TextBlock Text="Thin Font" FontSize="40" FontFamily="{StaticResource LatoThin}" />
        <TextBlock Text="Regular Font" FontSize="40" FontFamily="{StaticResource LatoRegular}" />
    </StackPanel>
</Window>

This is what I get on my designer

And this is what I get if I run the application

I really would like to preview what I'm trying to render without having to start the application or check it on the live preview. The tutorial I am following does show the presenter seeing the proper font in the designer, so I know there are some issues. Thanks in advance.