Make actions_font_family_no_default and content_font_family_no_default more translation-friendly (#3880)

* Make actions_font_family_no_default and content_font_family_no_default more translation-friendly

* Use new i18n keys

Author: jjanuszkiewicz

public/locales/en/translation.json

@@ -1,8 +1,8 @@
 {
     "accessibility": {
-        "actions_font_family_no_default": "Actions Font Family (Default):",
+        "actions_font_family_default": "Actions Font Family (Default: {{fontFamily}})",
         "all_tiles_in_color": "Show all game tiles in color",
-        "content_font_family_no_default": "Content Font Family (Default: ",
+        "content_font_family_default": "Content Font Family (Default: {{fontFamily}})",
         "disable_dialog_backdrop_close": "Disable closing dialogs by clicking outside",
         "fonts": "Fonts",
         "title": "Accessibility",

src/frontend/screens/Accessibility/index.tsx

@@ -163,14 +163,11 @@ export default React.memo(function Accessibility() {
           htmlId="content-font-family"
           value={contentFont}
           onChange={handleContentFontFamily}
-          label={
-            t(
-              'accessibility.content_font_family_no_default',
-              'Content Font Family (Default: '
-            ) +
-            defaultSecondaryFont.split(',')[0].trim() +
-            ')'
-          }
+          label={t(
+            'accessibility.content_font_family_default',
+            'Content Font Family (Default: {{fontFamily}})',
+            { fontFamily: defaultSecondaryFont.split(',')[0].trim() }
+          )}
         >
           {options}
         </SelectField>
@@ -179,14 +176,11 @@ export default React.memo(function Accessibility() {
           htmlId="actions-font-family"
           value={actionFont}
           onChange={handleActionsFontFamily}
-          label={
-            t(
-              'accessibility.actions_font_family_no_default',
-              'Actions Font Family (Default: '
-            ) +
-            defaultPrimaryFont.split(',')[0].trim() +
-            ')'
-          }
+          label={t(
+            'accessibility.actions_font_family_default',
+            'Actions Font Family (Default: {{fontFamily}})',
+            { fontFamily: defaultPrimaryFont.split(',')[0].trim() }
+          )}
         >
           {options}
         </SelectField>