Flickering and blurry text

Question

I have an issue with a text. In some custom usercontrols it is flickering every more/less second (probably when rendering) here is a gif:

I'm using these render and text options for now which are applied on Window:

RenderOptions.ClearTypeHint="Enabled"
TextOptions.TextFormattingMode="Display"
RenderOptions.BitmapScalingMode="HighQuality"

I was using these before:

RenderOptions.ClearTypeHint="Enabled"
RenderOptions.BitmapScalingMode="Linear"
TextOptions.TextRenderingMode="Grayscale"
TextOptions.TextFormattingMode="Display"

and it was ok but the text was too sharp.

XAML of this specific component:

<UserControl x:Class="FunctionButton" x:Name="PART_Base"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm" xmlns:ViewModels="clr-namespace:SkyPCTool"
         xmlns:materialDesign="clr-namespace:MaterialDesignThemes.Wpf;assembly=MaterialDesignThemes.Wpf"
         mc:Ignorable="d"
         TextElement.FontWeight="Medium"
         TextElement.FontSize="14"
         FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto"
         MinHeight="52" d:DesignWidth="300" Margin="0">
<UserControl.DataContext>
    <ViewModels:FunctionButtonViewModel/>
</UserControl.DataContext>
<UserControl.Resources>
    <ViewModels:TextToVisibilityConverter x:Key="textConverter" />
</UserControl.Resources>
<Border CornerRadius="2" Background="{StaticResource MaterialDesignPaper}">
    <Grid Margin="12,6">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="3*" />
        </Grid.ColumnDefinitions>
        <Button x:Name="PART_Button" HorizontalAlignment="Center" VerticalAlignment="Center" Padding="12,6" Content="{Binding ButtonCaption}" />
        <Grid Grid.Column="1" Margin="6,0">
            <Image Source="{Binding Icon}" ToolTip="{Binding IconTag}" />
        </Grid>
        <Grid Grid.Column="2" SnapsToDevicePixels="True">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0" Text="{Binding Title}" RenderOptions.ClearTypeHint="Enabled" VerticalAlignment="Center" TextTrimming="CharacterEllipsis" FontSize="14"  />
            <TextBlock Grid.Row="1" Text="{Binding Description}" RenderOptions.ClearTypeHint="Enabled" Margin="12,0,0,0" Visibility="{Binding Text, RelativeSource={RelativeSource Self}, Converter={StaticResource textConverter}}" FontWeight="Normal" VerticalAlignment="Center" TextWrapping="Wrap" FontSize="12.667" />
        </Grid>
    </Grid>
</Border>

Answer 1

I did it. I downloaded the Roboto font from Google website, then I set these options on Window:

RenderOptions.ClearTypeHint="Enabled"
TextOptions.TextFormattingMode="Ideal"
TextOptions.TextHintingMode="Animated"
TextOptions.TextRenderingMode="ClearType"