In Android, the three default font
options are monospace,
sans serif and serif. You do have some flexibility with adding effects to the
default fonts, but without custom fonts, you are pretty limited in how text in
your Android appears to your users. Luckily, it’s fairly straightforward to set
a custom font. You can find plenty of free custom fonts at sites likedafont.com – just download the .ttf file
for the font of your choice, and add it to the assets/fonts directory of your
codebase (create the directory if it doesn’t exist already).
Custom Fonts in
Views
If, for example, you’d like to set
the font for a TextView with id=name, it’s as simple as adding the following to
your code:
TextView name = (TextView) findViewById(R.id.name);
Typeface typeface = Typeface.createFromAsset(getContext().getAssets()"fonts/customFont.ttf");
name.setTypeface(typeface);
Typeface typeface = Typeface.createFromAsset(getContext().getAssets()"fonts/customFont.ttf");
name.setTypeface(typeface);
That’s fine when you have just one or two TextViews with custom fonts,
but it gets to be a pain when you want customized fonts on all your TextViews.
That’s a lot of boilerplate code to have in your activities! It would be
convenient to be able to specify the font name in xml. To do this, you can
extend TextView:
public class CustomTextView extends TextView {
private static final DEFAULT_FONT="defaultFont.ttf";
public CustomTextView(Context context) {
this(context, null);
}
public CustomTextView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public CustomTextView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
TypedArray arr = context.obtainStyledAttributes(attrs, R.styleable.CustomTextView, 0, 0);
String fontName = arr.getString(R.styleable.CustomTextView_fontName);
// Sets to a default font if none is specified in xml
if (fontName == null) {
fontName = DEFAULT_FONT;
}
setFont(fontName);
}
private void setFont(String fontName) {
Typeface typeface = Typeface.createFromAsset(getContext().getAssets(), "fonts/" + fontName);
setTypeface(typeface);
}
}
private static final DEFAULT_FONT="defaultFont.ttf";
public CustomTextView(Context context) {
this(context, null);
}
public CustomTextView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public CustomTextView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
TypedArray arr = context.obtainStyledAttributes(attrs, R.styleable.CustomTextView, 0, 0);
String fontName = arr.getString(R.styleable.CustomTextView_fontName);
// Sets to a default font if none is specified in xml
if (fontName == null) {
fontName = DEFAULT_FONT;
}
setFont(fontName);
}
private void setFont(String fontName) {
Typeface typeface = Typeface.createFromAsset(getContext().getAssets(), "fonts/" + fontName);
setTypeface(typeface);
}
}
In your attrs.xml (in res/values/, create the xml file if it doesn’t
exist already), add an attribute for CustomTextView as follows:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="CustomTextView">
<attr name="fontName" format="string"/>
</declare-styleable>
</resources>
<resources>
<declare-styleable name="CustomTextView">
<attr name="fontName" format="string"/>
</declare-styleable>
</resources>
Now you can add a custom font to a TextView in xml, without any
additional code to your activities:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:example="http://schemas.android.com/apk/res/com.example.customfonts"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.example.customfonts.CustomTextView
example:fontName="customFont2.ttf"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:example="http://schemas.android.com/apk/res/com.example.customfonts"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.example.customfonts.CustomTextView
example:fontName="customFont2.ttf"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
That’s it! Now you can easily set
custom fonts for views in xml.
Custom Fonts in
WebViews
For webviews, you still want to copy
the .ttf file into your assets/fonts directory, and then you can create new
font-faces in your css and use them by setting font-family:
<style type="text/css">
@font-face {
font-family:"customFont1";
src:url('file:///android_asset/fonts/customFont.ttf');
}
@font-face {
font-family:"PTS55F";
src:url('file:///android_asset/fonts/customFont2.ttf');
}
body { font-family:'customFont'; }
h1 { font-family:'customFont2'; }
</style>
@font-face {
font-family:"customFont1";
src:url('file:///android_asset/fonts/customFont.ttf');
}
@font-face {
font-family:"PTS55F";
src:url('file:///android_asset/fonts/customFont2.ttf');
}
body { font-family:'customFont'; }
h1 { font-family:'customFont2'; }
</style>
Using custom fonts gives you a lot more control over the visual
appearance of your application, but when don’t get carried away — using too
many random fonts can make an app seem very disjointed. In general, try to use
at most a few fonts that go well together. To get you started, here are 40 free designer
fonts.