How to display external fonts in WPF xaml designer?

Question

I am able to display external fonts during run time, but not in the designer.

Most of the topics I came across are for the opposite scenario where it displays in designer, and not during run time.

How do I display external fonts in both design and run time?

Below are my current code.

Resource Dictionary (Dictionary.xaml)

<FontFamily x:Key="Montserrat">pack://application:,,,/xxx;Component/Fonts/#Montserrat</FontFamily>

<Style x:Key="TBRoman" TargetType="{x:Type TextBlock}">
    <Setter Property="FontFamily" Value="{StaticResource Montserrat}" />
</Style>

User Controls

<UserControl.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/xxx;Component/Dictionary.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</UserControl.Resources>

Controls

<TextBlock Text="message" Style="{StaticResource TBRoman}" />