CODEWITHSUNDEEP
androidfonts
Amine Messabhia
Amine Messabhia

Reputation: 540

Android different font for each language

Is there any way to use a different font for each language?
There is the values-en, values-fr ...etc, but can we do something like font-fr, font-ar ...etc?

PS, I'm talking about res/font, not about assets/fonts. I would like to be able to set one font in XML, and then get the changes with each language, without setting the Typeface programmatically.

Upvotes: 15

Views: 9623

Answers (5)

CyxouD
CyxouD

Reputation: 155

I used the @ghita solution. However, in my case since I wanted to have also textSize, lineHeight, fontWeight and textColor in common style, so I put font families in different files (i.e. "font_families.xml"). This is how my file looks for one of locale:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <item name="regular" type="font">@font/alegreya_sans_regular</item>
    <item name="medium" type="font">@font/alegreya_sans_medium</item>
    <item name="semi_bold" type="font">@font/alegreya_sans_bold</item>
    <item name="wide_medium" type="font">@font/alegreya_sans_medium</item>
    <item name="wide_regular" type="font">@font/alegreya_sans_regular</item>
</resources>

After that I reference them in my themes.xml file i.e.:

    <style name="LargeTitleMedium" parent="TextAppearance.AppCompat.Title">
        <item name="android:textSize">40sp</item>
        <item name="lineHeight">48sp</item>
        <item name="android:fontFamily">@font/wide_medium</item>
        <item name="fontWeight">500</item>
        <item name="android:textColor">@color/neutral_10</item>
    </style>

Upvotes: 0

Osama Remlawi
Osama Remlawi

Reputation: 2990

First, you have to create font directory:

1- Right-click the res folder and go to New > Android resource directory. The New Resource Directory window appears.

2- In the Resource type > select font, and then click OK.

3- Note: The name of the resource directory must be font.

4- Add your font files in font folder (doesn't matter otf or ttf)

5- Right-click the res \ font folder > New > Font resource file

6- Rename "arabic".

7- Copy this code inside the created file.

<?xml version="1.0" encoding="utf-8"?>
<font-family xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<!-- regular -->
<font
    android:font="@font/ArabicFont"
    android:fontStyle="normal"
    android:fontWeight="400"

    app:font="@font/ArabicFont"
    app:fontStyle="normal"
    app:fontWeight="400" />

<!-- bold -->
<font
    android:font="@font/ArabicFont"
    android:fontStyle="normal"
    android:fontWeight="700"

    app:font="@font/ArabicFont"
    app:fontStyle="normal"
    app:fontWeight="700" />

</font-family>

8- Repeat step #5 and rename the file "english". And then copy this code inside it:

<?xml version="1.0" encoding="utf-8"?>
<font-family xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<!-- regular -->
<font
    android:font="@font/EnglishFont"
    android:fontStyle="normal"
    android:fontWeight="400"

    app:font="@font/EnglishFont"
    app:fontStyle="normal"
    app:fontWeight="400" />

<!-- bold -->
<font
    android:font="@font/EnglishFont"
    android:fontStyle="normal"
    android:fontWeight="700"

    app:font="@font/EnglishFont"
    app:fontStyle="normal"
    app:fontWeight="700" />

</font-family>

9- Create new locale file for each language you want for res/values/styles.xml (Right click > New > Values resource file > write styles). Note you have to select "Locale" from "Available qualifiers" > Click on the button ">>" then choose your language > then click Ok. "You should see new styles.xml (ar)"

10- Copy and paste all default generated content of styles.xml inside the created styles.xml "ex. styles.xml (ar) and styles.xml (en)"

11- Go to styles.xml (en) and add this xml line inside style tag

<item name="fontFamily">@font/english</item>

12- Now repeat and go to styles.xml (ar) and add this xml line inside style tag

<item name="fontFamily">@font/arabic</item>

13- Now run and see the different once you change locale.

14- Enjoy 😎

Upvotes: 3

Hammad Tariq
Hammad Tariq

Reputation: 13431

You can have different styles.xml file for each localization. and there you can define fontFamily under each style file.

And to declare font family you can create an xml file like below where you can referent otf or ttf files.

You can create .xml files under font directory. and define all the fonts there.

<!--  bukra.xml file which contains all the font families -->

<?xml version="1.0" encoding="utf-8"?>
<font-family xmlns:android="http://schemas.android.com/apk/res/android">

<font
    android:font="@font/bukra_semi_condensed_extra_light_normal"
    android:fontStyle="normal" />

<font
    android:font="@font/bukra_semi_condense_light_slanted"
    android:fontStyle="italic" />

</font-family>

And define two different fonts for your app based on localization like this.

This styles.xml file is under my values-ar file.

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimary</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="fontFamily">@font/bukra</item>
    </style>

Upvotes: 2

ghita
ghita

Reputation: 2796

Try this:

  1. add all of your font files in res/font
  2. localize style.xml (create values/style.xml && values-ln/style.xml)
  3. in AppTheme for every style.xml add <item name="android:fontFamily">@font/your_desired_font</item>
  4. that's all

if you have more than one font for a language (let's say regular, bold, light, etc.) then add it to each style.xml, example:

 <style name="FontLocalizedBold">
        <item name="android:fontFamily">@font/your_desired_font</item>
    </style>

usage:

<TextView
        android:id="@+id/textViewId"
        android:layout_width="100dp"
        android:layout_height="100dp"
        style="@style/FontLocalizedBold"
        android:gravity="center"
        tools:text="XX"/>

Upvotes: 19

underoid
underoid

Reputation: 439

It is possible.

  1. Put your localized otf file in your font folder (not localized)
  2. Duplicate your styles.xml in your localized values folder (values-fr) without any change with <item name="android:fontFamily">@font/app_font</item>.
  3. Create localized font folder (font-fr).
  4. In your new font folder create app_font.xml with android:font="@font/your_localized_otf_file"

Your localized font folder will be used by the localized styles file in your localized values folder. But otf/ttf file should be in general font folder.

Update:

Above answer was just to make use of font-xx folder (it is requested in the question) but since we are using localized styles.xml, there is a simpler solution without font-xx folder.

  1. Put your localized otf file in your font folder
  2. Create different_language_font.xml in your font folder with android:font="@font/your_localized_otf_file"
  3. In your styles.xml in your localized values folder (values-fr) <item name="android:fontFamily">@font/different_language_font</item>

Upvotes: 3

Related Questions