1. OTF란 무엇인가?

OTF(OpenType Font)는 Adobe와 Microsoft가 함께 개발한 폰트 포맷으로,
.ttf(TrueType Font)의 기능을 확장하면서도 고급 타이포그래피 기능을 포함합니다.

  • ✅ 다양한 글꼴 기능 (리그처, 대체 글자 등)
  • ✅ Unicode 지원
  • ✅ .ttf보다 범용성 넓음 (특히 전문가용 디자인 툴에서 선호)

Ubuntu에서는 특히 시스템용 또는 PDF 렌더링용 글꼴로 OTF가 많이 사용됩니다.

2. Ubuntu에서 설치된 OTF 폰트 확인하기

터미널에서 다음 명령어로 확인 가능합니다:

fc-list | grep "\.otf"

특정 폰트 이름으로 필터링할 수도 있습니다:

fc-list | grep "Nimbus Sans" | grep "\.otf"

3. 시스템 폰트를 웹에서 사용하고 싶을 때

웹에서는 시스템에 설치된 폰트를 그대로 쓸 수 없습니다.
왜냐하면 웹사이트에 접속하는 클라이언트의 컴퓨터에는 해당 폰트가 없을 수 있기 때문입니다.

→ 따라서 폰트를 웹서버에서 제공해야 하며, 가장 효율적인 형식은 .woff2입니다.

4. OTF → WOFF2 변환이 핵심이다!

OTF to WOFF2 font conversion illustration

📦 변환 도구 설치

sudo apt install woff2

🔄 변환 명령

woff2_compress YourFont.otf

→ 결과: YourFont.woff2

자동 변환 스크립트

#!/bin/bash
export LC_ALL=C
# [1] 대상 폰트 이름
read -p "Enter the fonts for convert to woff2: " FONT_NAME

# [2] 결과 저장 경로 설정
DEST_DIR="$HOME/fonts/$(echo $FONT_NAME | tr ' ' '_' | tr '[:upper:]' '[:lower:]')/woff2"

# [3] 변환 도구 확인
if ! command -v woff2_compress &> /dev/null; then
    echo "❌ 'woff2_compress' 명령어가 없습니다. 설치 후 사용하세요:"
    echo "    sudo apt install woff2"
    exit 1
fi

# [4] 결과 폴더 생성
mkdir -p "$DEST_DIR"

# [5] 시스템 폰트 목록 중 .otf이면서 FONT_NAME이 포함된 경로만 추출
echo "🔍 Searching for '$FONT_NAME' fonts with .otf extension..."
font_paths=$(fc-list | grep "$FONT_NAME" | grep "\\.otf" | cut -d: -f1 | sort | uniq)

if [ -z "$font_paths" ]; then
    echo "❌ '$FONT_NAME' 에 해당하는 .otf 폰트를 찾을 수 없습니다."
    exit 1
fi

# [6] 변환 실행 루프
for font_file in $font_paths; do
    base_name=$(basename "$font_file" .otf)
    output_file="$DEST_DIR/${base_name}.woff2"

    if [ -f "$output_file" ]; then
        echo "⚠️  이미 존재함: $output_file → 건너뜀"
        continue
    fi

    echo "🔄 변환 중: $base_name.otf → $base_name.woff2"

    if ! cp "$font_file" "/tmp/${base_name}.otf"; then
        echo "❌ 복사 실패: $font_file → 건너뜀"
        continue
    fi

    woff2_compress "/tmp/${base_name}.otf"
    mv "/tmp/${base_name}.woff2" "$output_file"
    rm "/tmp/${base_name}.otf"
    echo "✅ 저장됨: $output_file"
done

echo "🎉 모든 변환 완료! 저장 위치: $DEST_DIR"

필요하신 분들은 제가 작성한 위 스크립트를 사용해 보세요. 아주 잘 작동합니다.

5. 변환된 woff2 파일을 웹에서 사용하는 방법

웹 프로젝트의 static/fonts/ 디렉토리에 넣고 CSS에서 선언:

@font-face {
  font-family: 'Your Custom Font';
  src: url('/static/fonts/YourFont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

이제 HTML에서 다음처럼 사용할 수 있습니다:

<body style="font-family: 'Your Custom Font', sans-serif;">
  안녕하세요! 커스텀 폰트입니다.
</body>

6. 결론

항목 요점
.otf 폰트 Ubuntu 시스템에 많이 설치됨
웹에서 사용 클라이언트 PC엔 없으므로 .woff2 변환 필요
최적화 방법 woff2_compress로 변환 후 static에서 서빙
결과 빠른 폰트 로딩, 전용 폰트 디자인 반영 가능

Ubuntu 시스템을 웹서비스와 더 밀접하게 연결하고 싶은 개발자라면,
otf → woff2 변환은 꼭 알아두면 좋을 무기입니다. 💪