이 튜토리얼에서는 Android 앱에서 WebView에 사용자 지정 글꼴(Custom Font)을 적용하는 방법을 단계별로 알아봅니다. WebView는 기본적으로 웹 콘텐츠를 렌더링하므로, HTML과 CSS의 @font-face 규칙을 활용하면 손쉽게 원하는 폰트를 적용할 수 있습니다.
구현 원리
Android 프로젝트의 assets 폴더에 폰트 파일(.otf 또는 .ttf)과 HTML 파일을 함께 넣고, CSS에서 file:///android_asset/ 경로를 통해 폰트를 로드하는 것이 핵심입니다. 이렇게 하면 WebView가 렌더링하는 모든 텍스트에 커스텀 글꼴이 적용됩니다.
1단계: 새 프로젝트 생성
Android Studio를 열고 메뉴에서 File ⇒ New Project를 선택한 후, 새 프로젝트 생성에 필요한 모든 정보를 입력하여 프로젝트를 만듭니다. 언어는 Java 기준으로 진행합니다.
2단계: 레이아웃 XML 작성
res/layout/activity_main.xml 파일에 아래 코드를 추가합니다. 화면 전체를 차지하는 WebView 하나를 배치하는 간단한 구조입니다.
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/relativeLayout"
android:padding="8dp"
tools:context=".MainActivity">
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>3단계: assets 폴더 및 HTML 파일 생성
프로젝트의 app 폴더를 우클릭하여 New >> Folder >> Assets Folder를 선택해 assets 폴더를 생성합니다. 그다음 assets 폴더 안에 새 파일(webView1.html)을 만들고 아래 코드를 입력합니다.
여기서 주목할 부분은 CSS의 @font-face 선언입니다. file:///android_asset/Font.otf 경로로 폰트 파일을 불러온 뒤, body 요소에 해당 폰트 패밀리를 지정했습니다.
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>WebView9</title>
<meta forua="true" http-equiv="Cache-Control" content="max-age=0"/>
<style type="text/css">
@font-face {
font-family: 'Font';
src:url("file:///android_asset/Font.otf")
}
body {
font-family: 'Font', serif;
font-size: medium;
text-align: justify;
color:#ffffff
}
</style>
</head>
<body style="background-color:#212121">
This file was loaded from android assets folder using webView.</body>
</html>팁: 적용하고 싶은 폰트 파일(.otf)을 미리 다운로드하여 반드시 assets 폴더 안에 Font.otf라는 이름으로 함께 넣어야 합니다. 파일 이름이 다르면 CSS의 src 경로도 일치하도록 수정하세요.
4단계: MainActivity.java 코드 작성
src/MainActivity.java 파일에 아래 코드를 추가합니다. WebView를 찾아 assets 폴더의 HTML 파일을 로드하는 것이 전부입니다.
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebView;
public class MainActivity extends AppCompatActivity {
WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = findViewById(R.id.webView);
webView.loadUrl("file:///android_asset/webView1.html");
}
}5단계: AndroidManifest.xml 설정
androidManifest.xml 파일에 아래 코드를 추가합니다. MainActivity가 런처(Launcher) 액티비티로 등록되어 있는지 확인하세요.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
package="app.com.sample">
<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>앱 실행 및 결과 확인
이제 애플리케이션을 실행해 보겠습니다. 실제 Android 기기를 컴퓨터에 연결했다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 툴바의 Run(실행) 아이콘을 클릭하세요. 옵션 목록에서 자신의 모바일 기기를 선택하면, 기기 화면에 아래와 같이 커스텀 글꼴이 적용된 WebView가 표시됩니다.
마무리 정리
정리하면, Android WebView의 글꼴을 변경하는 핵심 과정은 다음 세 가지입니다.
- 폰트 파일 준비: .otf 또는 .ttf 폰트 파일을 assets 폴더에 추가
- CSS @font-face 선언: file:///android_asset/ 경로로 폰트를 등록하고 body에 적용
- HTML 로드: WebView에서 loadUrl()로 해당 HTML 파일 호출
이 방식을 응용하면 여러 개의 폰트를 동시에 등록하거나, 특정 요소마다 다른 글꼴을 적용하는 것도 가능합니다. 웹 콘텐츠 스타일링의 유연성을 그대로 살릴 수 있다는 점이 WebView의 큰 장점입니다.