วิธีเปลี่ยนฟอนต์ใน WebView ใน Android ด้วย Kotlin

ภาพรวม

ตัวอย่างนี้สาธิตวิธีเปลี่ยนฟอนต์ (Font Face) ใน WebView โดยโหลดไฟล์ HTML จาก Assets และใช้ CSS @font-face โหลดฟอนต์จาก Assets ด้วย

ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่

เปิด Android Studio เลือก File → New Project

ขั้นตอนที่ 2: 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>

ขั้นตอนที่ 3: สร้าง Assets และไฟล์ฟอนต์

1. คลิกขวาที่โฟลเดอร์ app → New → Folder → Assets Folder
2. วางไฟล์ฟอนต์ (เช่น CustomFont.otf หรือ .ttf) ลงใน src/main/assets/
3. สร้างไฟล์ webView.html ในโฟลเดอร์ assets เดียวกัน

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/CustomFont.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>

ขั้นตอนที่ 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)
        
        // เปิดใช้งาน JavaScript (ถ้าจำเป็น)
        webView.settings.javaScriptEnabled = true
        
        // โหลด HTML จาก Assets
        webView.loadUrl("file:///android_asset/webView.html")
    }
}

ขั้นตอนที่ 5: Manifest

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

วิธีการทำงานสมัยใหม่ (WebViewAssetLoader)

Android Q (API 29+) แนะนำให้ใช้ WebViewAssetLoader แทน file:///android_asset/ เพื่อความปลอดภัย:

import android.webkit.WebViewAssetLoader

val assetLoader = WebViewAssetLoader.Builder()
    .addPathHandler("/assets/", WebViewAssetLoader.AssetsPathHandler(this))
    .build()

webView.setWebViewClient(object : WebViewClient() {
    override fun shouldInterceptRequest(view: WebView, request: WebResourceRequest): WebResourceResponse? {
        return assetLoader.shouldInterceptRequest(request.url)
    }
})

webView.loadUrl("https://appassets.androidplatform.net/assets/webView.html")

การตั้งค่า WebView เพิ่มเติม

webView.settings.apply {
    javaScriptEnabled = true
    domStorageEnabled = true
    loadWithOverviewMode = true
    useWideViewPort = true
    builtInZoomControls = true
    displayZoomControls = false
}

หมายเหตุ

• รองรับฟอนต์ .ttf และ .otf
• ชื่อฟอนต์ใน CSS ต้องตรงกับ font-family ใน @font-face
• เส้นทาง file:///android_asset/ ใช้ได้เฉพาะใน Android เท่านั้น
• สำหรับ Production ควรใช้ WebViewAssetLoader

การทดสอบ

รันแอป WebView จะแสดงข้อความด้วยฟอนต์ที่กำหนดเอง พื้นหลังสีดำ ตัวอักษรสีขาว