Thay đổi font chữ WebView trong Android bằng Kotlin

Giới thiệu

Ví dụ này minh họa cách thay đổi font chữ (typeface) cho nội dung hiển thị trong WebView bằng cách nhúng font vào thư mục assets và sử dụng CSS @font-face trong file HTML cục bộ.

Các bước thực hiện

Bước 1: Tạo dự án mới

Mở Android Studio, chọn File → New Project, điền thông tin.

Bước 2: Giao diện (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:id="@+id/relativeLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="8dp"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

Bước 3: Tạo thư mục assets và file HTML

1. Chuột phải vào module app → New → Folder → Assets Folder.
2. Chuột phải vào thư mục assets → New → File đặt tên webView.html.
3. Đặt file font (ví dụ Font.otf) vào cùng thư mục assets.

Nội dung webView.html:

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
    <title>Custom Font WebView</title>
    <meta forua="true" http-equiv="Cache-Control" content="max-age=0"/>
    <style type="text/css">
        @font-face {
            font-family: 'CustomFont';
            src: url('file:///android_asset/Font.otf');
        }
        body {
            font-family: 'CustomFont', serif;
            font-size: medium;
            text-align: justify;
            color: #ffffff;
        }
    </style>
</head>
<body style="background-color:#212121">
    "All our dreams can come true, if we have the courage to pursue them." – Walt Disney.
</body>
</html>

Bước 4: MainActivity.kt

import android.os.Bundle
import android.webkit.WebView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "KotlinApp"

        val webView = findViewById<WebView>(R.id.webView)
        webView.settings.javaScriptEnabled = true
        webView.loadUrl("file:///android_asset/webView.html")
    }
}

Bước 5: AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.example.q11">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>
</manifest>

Chạy ứng dụng

Kết nối thiết bị, nhấn Run. WebView sẽ hiển thị nội dung HTML với font tùy chỉnh từ assets.

Lưu ý: Đảm bảo file font (Font.otf) tồn tại trong assets/. Đường dẫn trong CSS phải chính xác: file:///android_asset/Font.otf.