๊ตฌ๊ธ€์˜ ์ƒˆ๋กœ์šด ํ•œ๊ธ€ ์›นํฐํŠธ

2018. 6. 28.ใ†๋ฆฌ๋ทฐ/ํฐํŠธใ†๐Ÿ’ฌ๋Œ“๊ธ€

728x90
๋ฐ˜์‘ํ˜•


๊ตฌ๊ธ€์˜ ์ƒˆ๋กœ์šด ํ•œ๊ธ€ ์›นํฐํŠธ


๊ตฌ๊ธ€ํฐํŠธ์—์„œ ์–ผ๋ฆฌ์•ก์„ธ์Šค๋กœ ํ•œ๊ธ€ ์›นํฐํŠธ๋Š” ๋ช‡ ๊ฐ€์ง€๋งŒ ์ œ๊ณตํ–ˆ์—ˆ๋Š”๋ฐ

์ด๋ฒˆ์— ๋ณด๋‹ˆ ํ•œ๊ธ€ํฐํŠธ ์—…๋ฐ์ดํŠธ๊ฐ€ ๋งŽ์ด ๋˜์—ˆ๋”๋ผ๊ตฌ์š”@_@


์Šคํ‚จ์— ์ ์šฉํ•˜๊ธฐ๋„ ์—„์ฒญ ์‰ฝ๊ณ ์š”

๊ตฌ๊ธ€์„œ๋ฒ„๋ฅผ ์ด์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์— ํ‹ฐ์Šคํ† ๋ฆฌ์— ์˜ฌ๋ ค๋†“๊ณ  ์“ฐ๋Š” ๊ฒƒ์— ๋น„ํ•˜๋ฉด ๋ถ€๋‹ด๋„ ์—†๊ณ 

๊ฒŒ๋‹ค๊ฐ€ ํฐํŠธ์†Œ๊ฐœ๋ฅผ ๋ณด๋‹ˆ

"Google Fonts๋Š” ๋จธ์‹  ๋Ÿฌ๋‹์— ๊ธฐ๋ฐ˜์„ ๋‘” ์ตœ์ ํ™” ๊ธฐ์ˆ ์„ ํ†ตํ•ด

ํ•œ๊ธ€ ํฐํŠธ๋ฅผ ๋™์ ์œผ๋กœ ๋ถ„ํ•  ๋‹ค์šด๋กœ๋“œํ•ฉ๋‹ˆ๋‹ค"

๋ผ๊ณ ํ•ฉ๋‹ˆ๋‹ค ๋ญ”์†Œ๋ฆฌ๋ž˜?;


์›น์ƒ์˜ ๋ฐฉ๋Œ€ํ•œ ํ•œ๊ตญ์–ด ๋ฌธ์„œ๋ฅผ ๋ถ„์„ํ•œ ๊ฒฐ๊ณผ, Google์€ ์ฃผ์ œ์— ๋”ฐ๋ผ ์‚ฌ์šฉ๋˜๋Š” ๊ธ€์ž์˜ ํŒจํ„ด์„ ๋ฐœ๊ฒฌํ•˜๊ณ , ํŒจํ„ด์— ๋”ฐ๋ผ ํ•œ๊ธ€ ํฐํŠธ์— ํฌํ•จ๋œ 17,388๊ฐœ์˜ ๊ธ€๋ฆฌํ”„๋ฅผ 100์—ฌ ๊ฐ€์ง€ ๊ทธ๋ฃน์œผ๋กœ ๋‚˜๋ˆ„์—ˆ์Šต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์— Google Fonts๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ์›น ํŽ˜์ด์ง€๋ฅผ ๋ถˆ๋Ÿฌ์˜ฌ ๋•Œ, ํฐํŠธ ์ „์ฒด๋ฅผ ๋‹ค์šด๋กœ๋“œ ํ•˜๋Š” ๋Œ€์‹  ๋‚ด์šฉ์„ ํ‘œ์‹œํ•˜๋Š” ๋ฐ ๊ผญ ํ•„์š”ํ•œ ๋ช‡ ๊ฐ€์ง€ ๊ทธ๋ฃน๋งŒ์„ ์„ ํƒ์ ์œผ๋กœ ๋‹ค์šด๋กœ๋“œ ํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ํฐํŠธ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ธฐ์ˆ ์„ ์ ์šฉํ•œ Google Font๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ณด๋‹ค ๋น ๋ฅด๊ฒŒ ํฐํŠธ ์ „์ฒด๋ฅผ ๋‹ค์šด๋กœ๋“œํ•œ ๊ฒƒ๊ณผ ๋‹ค๋ฆ„์—†๋Š” ํŽ˜์ด์ง€๋ฅผ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

-๊ตฌ๊ธ€ํฐํŠธ


ํ•œ๊ธ€ํฐํŠธ๋Š” ์šฉ๋Ÿ‰์ด ์ ๊ฒŒ๋Š” 1M์—์„œ 15M์ด์ƒ๋˜๋Š” ํฐ ์šฉ๋Ÿ‰์„ ๊ฐ€์ง€๊ณ  ์žˆ๊ธฐ๋•Œ๋ฌธ์— ์›นํฐํŠธ๋กœ ์‚ฌ์šฉํ•˜๊ธฐ ๋ถˆ๋ฆฌํ•œ(?) ์–ธ์–ด์ž…๋‹ˆ๋‹ค ๊ทธ๋ž˜์„œ ๊ตฌ๊ธ€์€ ์ž์ฃผ ์‚ฌ์šฉ๋˜๊ณ  ํ•„์š”ํ•œ ๋ถ€๋ถ„๋งŒ ๋กœ๋”ฉํ•˜๋Š” ๊ธฐ์ˆ ์„ ์ ์šฉํ–ˆ๋‹ค๋Š” ๋ง์ด๋„ค์š”

์—ญ์‹œ ๊ตฌ๊ธ€์‹ .



์ถ”๊ฐ€๋œ ํฐํŠธ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค







๊ตฌ๊ธ€์—์„œ ์ œ๊ณตํ•˜๋Š” 878๊ฐœ์˜ ํฐํŠธ ์ค‘์— 23๊ฐœ์˜ ํ•œ๊ธ€ํฐํŠธ๊ฐ€ ์žˆ๋„ค์š”

์ต์ˆ™ํ•œ ํฐํŠธ๋“ค๋„ ์žˆ๊ณ  ์ฒ˜์Œ ๋ณด๋Š” ํฐํŠธ๋“ค๋„ ์žˆ์Šต๋‹ˆ๋‹คโœฆโ€ฟโœฆ


์˜ˆ์ „์—๋„ ์›นํฐํŠธ ์ ์šฉํ•˜๊ธฐ๋กœ ํฌ์ŠคํŒ… ํ•œ ์ ์ด ์žˆ์ง€๋งŒ

์ง์ ‘ ์›นํฐํŠธ๋ฅผ ๋งŒ๋“ค๊ณ  css๋ฅผ ์ž‘์„ฑํ•ด์„œ ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๋ผ

์ž˜ ๋ชจ๋ฅด๋Š” ๋ถ„๋“ค์ด ๋ณด๋ฉด ๋ญ” ์†Œ๋ฆฌ์•ผ ํ•˜์…จ์„ ๊ฒƒ ๊ฐ™์€๋ฐ์š”

๊ตฌ๊ธ€ ์›นํฐํŠธ ์ ์šฉ์€ ๋„ˆ๋ฌด ์‰ฌ์›Œ์„œ ์ปด๋งน๋„ ํ•  ์ˆ˜ ์žˆ๋Š” ์ˆ˜์ค€;





๊ตฌ๊ธ€ํฐํŠธ ๋ฐ”๋กœ๊ฐ€๊ธฐ


์šฐ์„  ๊ตฌ๊ธ€ํฐํŠธ ์‚ฌ์ดํŠธ๋กœ ๊ฐ€์„œ ์›ํ•˜๋Š” ํฐํŠธ๋ฅผ ๊ณ ๋ฆ…๋‹ˆ๋‹ค



ํ•ด๋‹น ํฐํŠธ๋ฅผ ํด๋ฆญํ•˜๋ฉด ์ƒ์„ธ์„ค๋ช…๊ณผ ํฐํŠธ ์˜ˆ์ œ๋ฅผ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค

์›ํ•˜๋Š” ํฐํŠธ ์˜ค๋ฅธ์ชฝ์— + ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด






์ ์šฉํ•  ์›นํฐํŠธ ๋ชฉ๋ก์— ์ถ”๊ฐ€๋ฉ๋‹ˆ๋‹ค

์—ฌ๋Ÿฌ ๊ฐœ๋ฅผ ํ•จ๊ป˜ ์ ์šฉํ•  ์ˆ˜๋„ ์žˆ๋Š”๋ฐ ๋งŽ์„์ˆ˜๋ก ์†๋„๊ฐ€ ๋Š๋ ค์ง€๋‹ˆ

์ตœ๋Œ€ 3~4๊ฐœ ์ •๋„๊ฐ€ ์ ๋‹นํ•˜์ง€ ์•Š์„๊นŒ ์‹ถ๋„ค์š”

์ €๋Š” ์ด๋ฏธ ๋•์ง€๋•์ง€์ง€๋งŒ;


์œ„ ๊นŒ๋งŒ ๋ฐ”๋ฅผ ํด๋ฆญํ•˜๋ฉด ์•„๋ž˜ ์„ค์ฒญ์ฐฝ์ด ์˜ฌ๋ผ์˜ต๋‹ˆ๋‹ค





์šฐ์ธก ์ƒ๋‹จ์— ๋‹ค์šด๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ์›นํฐํŠธ๊ฐ€ ์•„๋‹Œ ์ผ๋ฐ˜ํฐํŠธ๋กœ๋„ ๋‹ค์šด๋ฐ›์•„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค




<link href="https://fonts.googleapis.com/css?family=Gugi" rel="stylesheet">



์ด ๋ถ€๋ถ„์„ ๋ณต์‚ฌํ•ฉ๋‹ˆ๋‹ค


+ ๋ฌ˜ํ•œ์˜ค๋น ๋‹˜ ํŒ์ถ”๊ฐ€!

์ธํ„ฐ๋„ท์ต์Šคํ”Œ๋กœ๋Ÿฌ(IE)์—์„œ๋„ ํ•œ๊ธ€ํฐํŠธ๊ฐ€ ์ œ๋Œ€๋กœ ์ถœ๋ ฅ๋˜๊ฒŒ ํ•˜๋ ค๋ฉด

&amp;subset=korean

๋ฅผ ์ถ”๊ฐ€ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค


<์˜ˆ์ œ>

<link href="https://fonts.googleapis.com/css?family=Gugi&amp;subset=korean" rel="stylesheet">








์„ค์ •์— ์Šคํ‚จ ํŽธ์ง‘์œผ๋กœ ๋“ค์–ด๊ฐ€์„œ






<head> ์™€ </head> ์‚ฌ์ด์— ์•„๋ฌด๋ฐ๋‚˜ ๋ถ™์—ฌ์ฃผ๋ฉด ์›นํฐํŠธ๋ฅผ ์‚ฌ์šฉํ•  ์ค€๋น„ ๋.






font-family: 'Gugi', cursive;



๊ทธ๋ฆฌ๊ณ  CSSํƒญ์œผ๋กœ ๊ฐ€์„œ ํฐํŠธ๋ฅผ ์ ์šฉํ•˜๊ณ  ์‹ถ์€ ๋ถ€๋ถ„์— ์œ„ ๋ถ€๋ถ„์„ ๋„ฃ์–ด์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค

๋ณดํ†ต HTML์ด ๋ญ๊ณ  CSS๊ฐ€ ๋ญ”์ง€ ๋ชจ๋ฅด๋Š” ๋ถ„๋“ค์€ ์ด ๋ถ€๋ถ„์ด ์–ด๋ ค์šฐ์‹คํ…๋ฐ์š”


์šฐ์„  ํฌ์ŠคํŠธ ํƒ€์ดํ‹€์— ํฐํŠธ๋ฅผ ์ ์šฉํ•˜๊ณ  ์‹ถ์œผ๋ฉด CSS์—์„œ ์ œ๋ชฉ๋ถ€๋ถ„์„ ์ฐพ์œผ๋ฉด ๋ฉ๋‹ˆ๋‹ค

์ดˆ๋ณด์ž๋„ ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฌด์ž‘์ • ๋”ฐ๋ผํ•˜๊ธฐ!


์˜ˆ์ „ ํŒ์„ ๋‹ค์‹œ ํ•œ ๋ฒˆ ์จ๋ด…๋‹ˆ๋‹ค.

ํฌ์ŠคํŒ… ํ•  ๊ฑฐ ์—†์–ด์„œ ๊ธ€ ๋Š˜๋ฆฌ๋Š”๊ฑฐ ์•„๋‹™๋‹ˆ๋‹ค;



ํฌ๋กฌ๋ธŒ๋ผ์šฐ์ € ๊ธฐ์ค€.


ํด๋ฆญํ•˜๋ฉด ์ปค์ ธ์š”


๋ธŒ๋ผ์šฐ์ €์—์„œ F12๋ฅผ ๋ˆ„๋ฅด๋ฉด ์˜ค๋ฅธ์ชฝ์— ๊ฐœ๋ฐœ์ž๋„๊ตฌ๊ฐ€ ์—ด๋ฆฝ๋‹ˆ๋‹ค


โ‘  ์—ฌ๊ธฐ์„œ ์ƒ๋‹จ์— ์„ ํƒ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๊ณ 

โ‘ก ์ ์šฉํ•˜๊ณ  ์‹ถ์€ ํฐํŠธ, ์—ฌ๊ธฐ์„œ๋Š” ํƒ€์ดํ‹€์„ ํด๋ฆญํ•˜๋ฉด

โ‘ข ์˜ค๋ฅธ์ชฝ ๊ฐœ๋ฐœ์ž๋„๊ตฌ ์•„๋ž˜์— CSS๊ฐ€ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค





์Šคํ‚จ ์„ค์ •์˜ CSS์—์„œ ์œ„์น˜๋งŒ ์ฐพ์œผ๋ฉด ๋ฉ๋‹ˆ๋‹ค

์ œ ํƒ€์ดํ‹€ ์„ค์ •์€ CSS 916๋ฒˆ์งธ ์ค„์— ์žˆ๋‹ค๋Š” ๋œป.






์Šคํ‚จ ์„ค์ • CSSํƒญ์—์„œ 916๋ฒˆ์งธ ์ค„์„ ์ฐพ์•„๋ณด๋ฉด ์•„๊นŒ ์ฐพ์€๊ฒŒ ๋”ฑ!


font-family๊ฐ’์ด ์—†๋‹ค๋ฉด ์œ„์—


font-family: 'Gugi', cursive;


๋ฅผ ๊ทธ๋Œ€๋กœ ๋ถ™์—ฌ ๋„ฃ์œผ๋ฉด ๋˜๊ณ 

์ €๋Š” ์ด๋ฏธ ํฐํŠธ ์„ค์ •์ด ๋˜์–ด ์žˆ์œผ๋‹ˆ "nanumsquare"๋ถ€๋ถ„๋งŒ 'Gugi', cursive ๋กœ ๋ณ€๊ฒฝํ•ด ์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

๋Š๋ฌด๋Š๋ฌด ๊ฐ„๋‹จํ•˜์ฃ ?^^









๋ช‡ ๊ฐœ๋ฅผ ์ด๋ฏธ ์ œ ๋ธ”๋กœ๊ทธ์— ์ ์šฉํ•ด๋ดค์Šต๋‹ˆ๋‹ค

์ œ๋ชฉ์— ๋…๋„์ฒด๋ฅผ ๋„ฃ์–ด๋ดค๊ตฌ์š” ๋‹‰๋„ค์ž„์— gugi ๊ตฌ๊ธฐ? ๊ตฌ์ง€?์ฒด๋ฅผ ๋„ฃ์–ด๋ดค์Šต๋‹ˆ๋‹ค ๊ฑฐ์ง€์ฒด๋Š” ์•„๋‹ˆ๊ฒ ์ง€;

 gugi์ฒด๋Š” ํฌ์ธํŠธ๋กœ ์ข‹์€ ๊ฒƒ ๊ฐ™์•„์š”


๊ดœ์ฐฎ์€๊ฐ€์š”?^^

์‹ฌํ”Œ์ด์ฆˆ๋”๋ฒ ์ŠคํŠธ๋ผ ์ƒ๊ฐํ•˜๋Š”๋ฐ๋„ ๋ญ”๊ฐ€ ๊ณ„์† ์ถ”๊ฐ€ํ•ด์„œ ๋ง๋ถ™์ด๊ฒŒ ๋˜๋Š”๊ตฐ์š”;


๊ทธ๋ฆฌ๊ณ  ๊ตฌ๊ธ€ํฐํŠธ์—์„œ ์ œ๊ณตํ•˜๋Š” ๋ชจ๋“  ํ•œ๊ธ€์›นํฐํŠธ๋Š” OPEN FONT LICENSE (OTF) ๋ผ์ด์„ผ์Šค๋กœ

๊ฐœ์ธ, ์ƒ์—…์ , ๋ชจ๋“  ๋ถ€๋ถ„์—์„œ ์ž์œ ๋กญ๊ฒŒ ์‚ฌ์šฉํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.(๋‹จ, ํŒ๋งค๊ธˆ์ง€)


๊ตฌ๊ธ€์—์„œ github ํŽ˜์ด์ง€์— ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒํ•˜๋ฉด์„œ ๋ฉ‹๋“œ๋Ÿฌ์ง„ ํ•œ๊ธ€ํฐํŠธ์†Œ๊ฐœ ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค์—ˆ์œผ๋‹ˆ

๋‹ค์–‘ํ•˜๊ฒŒ ์ ์šฉ๋œ ์›นํฐํŠธ๋ฅผ ๊ตฌ๊ฒฝํ•˜๋Š” ๊ฒƒ๋„ ์žฌ๋ฐŒ์„ ๊ฑฐ์—์š”



Google Fonts + ํ•œ๊ตญ์–ด



์ข‹์€ ํฐํŠธ๊ฐ€ ์ ์žฌ์ ์†Œ์— ์“ฐ์ธ๋‹ค๋ฉด ๋””์ž์ธ์ด๋‚˜ ์ฝ˜ํ…์ธ ๊ฐ€ ๋” ๋น›์„ ๋ฐœํ•˜๊ธฐ๋„ ํ•˜์ง€์š”

๋ธ”๋กœ๊ทธ์— ์‚ฐ๋œปํ•˜๊ฒŒ ํฐํŠธ ํ•˜๋‚˜ ์ ์šฉํ•ด ๋ณด์‹œ๋ฉด ์–ด๋–จ๊นŒ์š”^^

728x90
๋ฐ˜์‘ํ˜•