Android/Android Weekly

Downloadable and Preloaded Fonts on Android

๋…ธ๋ฃจ๋ฃฝ 2024. 4. 23. 11:46

Downloadable and Preloaded Fonts on Android

์•ฑ์„ ๋…ํŠนํ•˜๊ฒŒ ๋ณด์ด๊ณ  ๋Š๋ผ๊ฒŒ ๋งŒ๋“œ๋Š” ์ค‘์š”ํ•œ ๋ถ€๋ถ„ ์ค‘ ํ•˜๋‚˜๋Š” ํ›Œ๋ฅญํ•œ ํฐํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

 

์•ˆ๋“œ๋กœ์ด๋“œ ๊ธฐ๋ณธ ํฐํŠธ๋Š” Roboto์ธ๋ฐ, ์‚ฌ์šฉ์ž์˜ ํฐํŠธ๊ฐ€ ์•„๋‹Œ Roboto๋ฅผ ๋ณด๊ฒŒ ํ•˜๊ณ  ์‹ถ์€ ๊ฐœ๋ฐœ์ž๋“ค์„ ์œ„ํ•ด

Google์€ Google Fonts ์ €์žฅ์†Œ๋ฅผ ๋งŒ๋“ค์–ด ํฐํŠธ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ—ˆ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค.

์ด๋Š” ๊ฐœ๋ฐœ์ž๋“ค์ด ํฐํŠธ๋ฅผ ํ›จ์”ฌ ์‰ฝ๊ฒŒ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด์ฃผ์—ˆ๊ณ , ์ด๋ฅผ Downloadable Fonts๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

 

์ถ”ํ›„ Google์€ Preloaded Fonts๋ฅผ ์†Œ๊ฐœํ•˜์—ฌ ์•ฑ์ด ์‹คํ–‰๋  ๋•Œ๊ฐ€ ์•„๋‹Œ ์„ค์น˜๋  ๋•Œ ํฐํŠธ๊ฐ€ ๋‹ค์šด๋กœ๋“œ๋  ์ˆ˜ ์žˆ๋„๋ก ํ–ˆ์Šต๋‹ˆ๋‹ค.

 

Downloadable Fonts๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๋‘ ๊ฐ€์ง€๊ฐ€ ์žˆ๊ณ , ํฐํŠธ๋ฅผ Preload ํ•˜๋ ค๋ฉด ํ•œ ๋‹จ๊ณ„๋ฅผ ๋” ๊ฑฐ์ณ์•ผ ํ•ฉ๋‹ˆ๋‹ค.

 

Downloadable Fonts ์ถ”๊ฐ€ํ•˜๋Š” ๋ฒ•

(New UI ๊ธฐ์ค€)

Resource Manager

์ขŒ์ธก ํˆด๋ฐ”์— ํด๋” ์•„์ด์ฝ˜ ๋ฐ‘ Resource Manager๋ฅผ ํด๋ฆญ → ์šฐ์ธก ๋ ์  3๊ฐœ๋ฅผ ๋ˆŒ๋Ÿฌ ๋”๋ณด๊ธฐ → Font ์„ ํƒ

 

More Fonts

ํ”Œ๋Ÿฌ์Šค ์•„์ด์ฝ˜์„ ํด๋ฆญ → More Fonts...๋ฅผ ์„ ํƒ

 

Downloadable Fonts

Downloadable Fonts๊ฐ€ ๋‚˜์˜ต๋‹ˆ๋‹ค.!

 

๋งˆ์Œ์— ๋“œ๋Š” ํฐํŠธ๋ฅผ ์ฐพ์•„์„œ OK๋ฅผ ๋ˆ„๋ฅด๋ฉด,,,,,,,

 

font ๋””๋ ‰ํ† ๋ฆฌ์—๋Š” ํฐํŠธ ํŒŒ์ผ์ด ์ƒ์„ฑ๋˜๊ณ ,

values์—๋Š” font_certs.xml๊ณผ preloaded_fonts.xml์ด ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค.!

 

font_certs.xml์€ ํฐํŠธ ๋‹ค์šด๋กœ๋“œ์— ํ•„์š”ํ•œ ์ธ์ฆ์„œ๋ฅผ ์ œ๊ณตํ•˜๊ณ , preloaded_fonts.xml์€ ๋‹ค์Œ ์„น์…˜์—์„œ ๋‹ค๋ฃฐ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

 

Downloadable Fonts๋ฅผ Preloadํ•˜๊ธฐ

value ๋””๋ ‰ํ„ฐ๋ฆฌ์˜ "preloaded_fonts.xml" ํŒŒ์ผ์€ ํฐํŠธ๋ฅผ ์‚ฌ์ „๋กœ๋“œํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋˜๋Š” ํ•ต์‹ฌ์ž…๋‹ˆ๋‹ค.

์ด ํŒŒ์ผ์€ Google Play์—์„œ ์•ฑ์ด ์„ค์น˜๋  ๋•Œ ์•ˆ๋“œ๋กœ์ด๋“œ๊ฐ€ ์‚ฌ์ „๋กœ๋“œํ•  ํฐํŠธ ๋ฆฌ์†Œ์Šค ๋ชฉ๋ก์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.

๋˜ํ•œ ์‹œ์Šคํ…œ์€ ์ด๋ฏธ ์‹œ์Šคํ…œ์— ์—†๋Š” ํฐํŠธ๋งŒ ๋‹ค์šด๋กœ๋“œํ•˜์—ฌ ์ด ํ”„๋กœ์„ธ์Šค๋ฅผ ์ตœ์ ํ™”ํ•ฉ๋‹ˆ๋‹ค.

์ฆ‰, ํฐํŠธ๊ฐ€ ์ด๋ฏธ ์‹œ์Šคํ…œ์— ์žˆ๋Š” ๊ฒฝ์šฐ ์•ฑ์˜ ํฌ๊ธฐ๊ฐ€ ๋” ์ž‘์•„์ง‘๋‹ˆ๋‹ค.

 

์ด๋Š” ํฐํŠธ๊ฐ€ ์•ฑ๊ณผ ํ•จ๊ป˜ ๋ฒˆ๋“ค๋กœ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์ด ํ–ฅ์ƒ๋ฉ๋‹ˆ๋‹ค.

์ฒซ ๋กœ๋“œ์—์„œ ํฐํŠธ๊ฐ€ ๋กœ๋“œ๋˜๋Š” ๋™์•ˆ ๊นจ์ง„ ํฐํŠธ ๋ Œ๋”๋ง์ด ์—†์œผ๋ฉฐ ์‚ฌ์šฉ์ž์—๊ฒŒ๋Š” ๋” ์ž‘์€ ์•ฑ ํฌ๊ธฐ๊ฐ€ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค!

 

Jetpack Compose์—์„œ Downloadable Fonts ์ถ”๊ฐ€ํ•˜๊ธฐ

Jetpack Compose์—์„œ๋Š” androidx.compose.ui.text ํŒจํ‚ค์ง€์˜ GoogleFont ํด๋ž˜์Šค๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋‹ค์šด๋กœ๋“œ ๊ฐ€๋Šฅํ•œ ํฐํŠธ๋ฅผ ์š”์ฒญํ•˜๋Š” ๋˜ ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด Jetpack Compose์—์„œ ๋ณด๋‹ค ํŽธ๋ฆฌํ•œ ํฐํŠธ ๋กœ๋“œ ํ๋ฆ„์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

๋จผ์ € "build.gradle" ํŒŒ์ผ์— androidx.compose.ui:ui-text-google-fonts ํŒจํ‚ค์ง€๋ฅผ ์ถ”๊ฐ€ํ•˜์—ฌ Google ํฐํŠธ ํด๋ž˜์Šค๋ฅผ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ ๋‹ค์Œ Google ํฐํŠธ ์ œ๊ณต์ž๋ฅผ ์ƒ์„ฑํ•˜์—ฌ ๊ถŒํ•œ, ํŒจํ‚ค์ง€ ๋ฐ ์ธ์ฆ์„œ๋ฅผ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. "font_certs.xml" ํŒŒ์ผ์€ Resource Manager๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํฐํŠธ๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๋‚˜ Android ์„ค๋ช…์„œ์—์„œ ๋งํฌ๋œ ํŒŒ์ผ์„ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ์œผ๋กœ GoogleFont ํด๋ž˜์Šค๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํฐํŠธ๋ฅผ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.

 

๋งˆ์ง€๋ง‰์œผ๋กœ FontFamily๋ฅผ ์ •์˜ํ•˜๊ณ  ์ด์ „ ๋‹จ๊ณ„์—์„œ ์ƒ์„ฑ๋œ ๊ฐ’๋“ค์„ ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ์ฝ”๋“œ์—์„œ ๋ชจ๋‘ ์–ด๋–ป๊ฒŒ ๋ณด์ด๋Š”์ง€ ํ™•์ธํ•ด ๋ณด์„ธ์š”.

    val provider = GoogleFont.Provider(
        providerAuthority = "com.google.android.gms.fonts",
        proiderPackage = "com.google.android.gms",
        certificates = R.array.com_google_android_gms_fonts_certs,
    )

    val roboto = GoogleFont("Roboto")

    val robotoFontFamily = FontFamily(
        Font(
            googleFont = roboto,
            fontProvider = provider,
        ),
    )

    val robotoTextStyle = TextStyle(
        fontFamily = robotoFontFamily,
    )

 

๊ทธ๋Ÿฌ๋‚˜ ์ด ๋ฐฉ๋ฒ•์€ ์ฝ”๋“œ๋กœ ๋ชจ๋“  ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ํฐํŠธ๋ฅผ Preload ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค..

๋”ฐ๋ผ์„œ ํฐํŠธ๋ฅผ Preload ํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ Resource Manager๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํฐํŠธ๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ํ•„์š”ํ•˜๊ฑฐ๋‚˜,

ํฐํŠธ XML ๋ฐ "preloaded_fonts.xml" ํŒŒ์ผ์„ ์ˆ˜๋™์œผ๋กœ ์ถ”๊ฐ€ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

 

 

๊ฒฐ๋ก 

Downloadable Fonts์™€ Preloaded Fonts๋Š” ๋ฒˆ๋“ค๋œ ํฐํŠธ๋ณด๋‹ค ๋” ๋‚˜์€ ๊ฒฝํ—˜์„ ์ œ๊ณตํ•˜๋ฉด์„œ ์‚ฌ์šฉ์ž์—๊ฒŒ ์ผ๊ด€๋œ ๊ฒฝํ—˜์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

Google Fonts๋ฅผ ํ†ตํ•ด ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋Š” ํฐํŠธ๊ฐ€ ํ•„์š”ํ•˜๊ณ  ๋ฒˆ๋“ค๋กœ ์ œ๊ณตํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ๋ฅผ ์ œ์™ธํ•˜๊ณ ๋Š”

Downloadable Fonts์™€ Preloaded Fonts๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ๋„ ์ข‹์€ ๋ฐฉ๋ฒ• ์ค‘ ํ•˜๋‚˜๊ฐ€ ๋  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค!๐Ÿ˜„

 

Reference

https://dladukedev.com/articles/031_preload_typeface_compose/

 

Downloadable and Preloaded Fonts on Android

Downloadable and Preloaded Fonts on Android March 07, 2024 An important part of making your app look and feel unique is using a great font, or even if you like Roboto you might want to make sure your users see Roboto and not whatever other default the manu

dladukedev.com