Mong dev blog

개발 기술/개발 이야기

[CSS/JS] 웹 폰트를 최적화하는 5가지 방법

by GicoMomg 2022. 12. 4.

😃 이번시간에는 웹폰트 로딩을 최적화하는 5가지 방법을 알아보았다! (참고1, 참고2, 참고3)


1. 들어가기에 앞서

1) FOIT, FOUT ?

  • 우리가 처음 사이트에 진입했을 때, 글자가 늦게 뜨거나 폰트가 나중에 적용되는 현상이 일어난다.

  • 이 두 현상은 각각 지칭하여 FOIT, FOUT라고 부르는데,
  • Flash of Invisible Text (FOIT)란, 브라우저가 폰트를 다운로드하기 전까지 글자가 보이지 않는 현상이며,
  • Flash of Unstyled Text (FOUT)란, 브라우저가 폰트를 다운로드하기 전까지 폰트가 적용되지 않는 현상을 말한다.
  • 그런데 이 두 현상은 왜 일어나는걸까? 브라우저 동작과 함께 살펴보자!

2) 브라우저 동작과 웹 폰트

  • 폰트에서 FOIT, FOUT가 일어나는 이유를 알기 위해선, 우리는 브라우저 동작을 알아야 한다.
  • 아래 그림은 브라우저가 렌더링할 때, 정보를 요청하는 어떤 순서를 나타낸다.

순서  설명
T0  - 브라우저가 HTML 문서를 요청한다.
T1  - HTML 응답이 오면 DOM 구성을 시작한다.
 - 브라우저가 CSS, JS 및 기타 리소스를 요청한다.
T2  - 모든 CSS 콘텐츠를 수신한 뒤, CSSOM을 구성한다.
 - 그 후 CSSOM을 DOM 트리와 결합시켜 렌더링 트리를 구성한다.
 - 이 시점에, 폰트 리소스를 요청한다.
T3  - 콘텐츠를 화면에 그린다.
 - 이때, 폰트를 사용할 수 없는 상태면 브라우저는 글자를 렌더링하지 않을 수도 있다.
 - 하지만 폰트를 사용할 수 있다면 글자를 그린다.
  • 이처럼 폰트 리소스 요청은 다른 리소스 요청보다 늦게 진행되며,
  • 콘텐츠를 화면에 그리는 동안 폰트 리소스 응답이 늦어지면 FOIT, FOUT가 발생하는 것이다.

🙂 그럼 어떻게 해야, 폰트를 최적화할 수 있을까? 같이 알아보자



2. 웹 폰트를 최적화하는 방법

1) 웹폰트 리소스를 미리 로드하자

  • 앞서 브라우저 동작을 살펴봤듯이 폰트 리소스 요청은 다른 리소스 요청보다 늦게 시작한다.
  • 그렇기 때문에, 브라우저가 렌더링하는 동안 폰트 리소스 응답이 늦어져 폰트가 적용되지 않는 것이다.
  • 그렇다면, 폰트 리소스 요청 시점을 당기면 어떨까?
  • 웹폰트를 최적화하는 첫 번째 방법은, preload를 사용해 폰트 리소스를 초기에 요청하는 방법이다.
  • 사용 방법은 간단한데, <head>에서 폰트를 요청할 때, rel=”preload”를 추가하면 된다.
<link rel="preload" href="/test.woff2"as="font" type="font/woff2" crossorigin />
  • 이렇게, preload를 설정하면, 브라우저가 폰트 리소스를 우선적으로 로드하게 된다.

🤔 preload를 사용하면 폰트가 늦게 적용되는 현상이 적어진다. 그럼 이 방법은 항상 좋을까? 아니다!

  • 일반적으로 브라우저는 현재 페이지에서 필요한 폰트만 다운로드한다.
  • 하지만, preload를 설정하면 현재 페이지에서 사용하지 않더라도 해당 폰트를 우선적으로 로드하게 된다.
  • 만약 많은 양의 폰트를 preload하게 되면 로딩 시간이 길어져, 이 방법의 장점이 없어지는 셈이다.ㅠ



2) 폰트 로딩 API를 사용하자

(1) new FontFace 사용하기

  • 폰트 로딩 API는 CSS 폰트를 재정의하여 폰트 로드 동작을 재정의할 수 있다.
  • 만약 폰트 로딩이 완료되어 사용 가능할 때, 텍스트를 나타낼 거라면 아래와 같이 재정의하면 된다.
const font = new FontFace('Banana Font', 'url(/fonts/banana.woff2)', {
  style: 'normal',
  unicodeRange: 'U+000-5FF',
  weight: '300',
});

// 1. DOM 트리 구성을 기다리지 않고, 초기에 즉시 실행
font.load().then(function() {

  // 2. 폰트 다운로드가 끝나면 폰트를 적용
  document.fonts.add(font);
  document.body.style.fontFamily = "Banana Font, serif";

  // 3.(콘텐츠를 숨긴 상태) 폰트 랜더링이 끝나면 폰트 사용이 가능하면 콘텐츠를 나타냄
  const content = document.getElementById("content");
  content.style.visibility = "visible";
});
  • 이렇게 폰트 로딩 API를 사용하면, 폰트 로딩전까지 텍스트 렌더링을 보류하거나
  • 대체 폰트를 사용하다가 로딩이 끝난 시점에 원하는 폰트로 변경할 수도 있다.

(2) Web font loader 사용하기

  • 또 다른 방법으로 Web font loader를 사용할 수 있다.
  • 만약 @font-face로 폰트를 설정했다면, 이 로더를 사용해 구글 폰트, Fonts.com 등을 로드할 수 있다.
  • 방법은 간단한데, 다운로드하고 싶은 웹 폰트를 families에 추가만 하면 된다.
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
  WebFont.load({
    google: {
      families: ['Droid Sans', 'Droid Serif']
    }
  });
</script>

  • 로더가 폰트를 다운로드하면, 로딩 상황에 따라 html 태그에 아래와 같은 클래스가 적용된다.
.wf-loading {}   /* 폰트 로딩중 */
.wf-active  {}   /* 폰트 로딩완료 */
.wf-inactive {}
.wf-<familyname>-<fvd>-loading {} /* 특정 폰트 로딩중 */
.wf-<familyname>-<fvd>-active  {} /* 특정 폰트 로딩완료 */
.wf-<familyname>-<fvd>-inactive {}



3) 용량이 작은 웹폰트 형식을 사용하자

(1) 웹 폰트의 여러가지 형식


  • 이 중에서 WOFF2, WOFF가 압축률이 좋은데, 기본적으로 폰트를 사용할 때 가장 압축률이 좋은 WOFF2을 쓰고 지원하지 않는 브라우저에서는 WOFF를 쓰면 된다.

(2) 여러 형식을 사용하는 방법

  • 아래 코드는 여러 형식의 폰트를 지정하는 방법이다.
  • 만약 사용자의 브라우저에 폰트가 있는 경우, 로컬의 폰트를 사용하고 그렇지 않는 경우 다른 형식의 웹폰트를 사용한다.
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto'),                   /* 1. 사용자의 PC에 해당 폰트가 있다면, 이 폰트를 사용 */
    url(woff2-font-path) format('woff2'), /* 2. local에 Roboto가 없다면, woff2 형식 사용 */
    url(woff-font-path) format('woff');   /* 3. woff2 형식을 지원하지 않는다면 woff형식 사용 */
}



4) 서브셋 폰트를 사용하자

(1) 서브셋 폰트를 사용하여 최적화하자

  • 서브셋 폰트란, 폰트에서 불필요한 글자를 제거한 폰트 파일을 말한다.
  • 한글의 경우 모든 자음, 모음을 조합하면 만 개가 넘는다.
  • 하지만 실제 서비스에서 사용하지 않는 조합(걁, 뱕)도 많다.
    (KS X 1000 한글 2350자, KS X 1001 특수문자)

  • 그렇기 때문에 불필요한 조합을 제거하여 폰트의 용량을 줄이고 폰트 최적화를 할 수 있다.

(2) 서브셋 폰트 만드는 방법

  • 서브셋 폰트를 만들 수 있는 사이트가 존재한다. (링크)


  • 사이트로 이동하여 변환을 원하는 폰트를 등록하고, 아래 글자 목록을 characters에 추가하면 된다.
글자 목록 보기 
ㄱㄲㄳㄴㄵㄶㄷㄸㄹㄺㄻㄼㄽㄾㄿㅀㅁㅂㅃㅄㅅㅆㅇㅈㅉㅊㅋㅌㅍㅎ
ㅏㅐㅑㅒㅓㅔㅕㅖㅗㅘㅙㅚㅛㅜㅝㅞㅟㅠㅡㅢㅣ
0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!"\#$%&'()*+,-./:;<=>?@[^_`|~
가각간갇갈갉갊감갑값갓갔강갖갗같갚갛개객갠갤갬갭갯갰갱갸갹갼걀걋걍걔걘걜거걱건걷걸걺검겁것겄겅겆겉겊겋게겐겔겜겝겟겠겡겨격겪견겯결겸겹겻겼경곁계곈곌곕곗고곡곤곧골곪곬곯곰곱곳공곶과곽관괄괆괌괍괏광괘괜괠괩괬괭괴괵괸괼굄굅굇굉교굔굘굡굣구국군굳굴굵굶굻굼굽굿궁궂궈궉권궐궜궝궤궷귀귁귄귈귐귑귓규균귤그극근귿글긁금급긋긍긔기긱긴긷길긺김깁깃깅깆깊까깍깎깐깔깖깜깝깟깠깡깥깨깩깬깰깸깹깻깼깽꺄꺅꺌꺼꺽꺾껀껄껌껍껏껐껑께껙껜껨껫껭껴껸껼꼇꼈꼍꼐꼬꼭꼰꼲꼴꼼꼽꼿꽁꽂꽃꽈꽉꽐꽜꽝꽤꽥꽹꾀꾄꾈꾐꾑꾕꾜꾸꾹꾼꿀꿇꿈꿉꿋꿍꿎꿔꿜꿨꿩꿰꿱꿴꿸뀀뀁뀄뀌뀐뀔뀜뀝뀨끄끅끈끊끌끎끓끔끕끗끙끝끼끽낀낄낌낍낏낑나낙낚난낟날낡낢남납낫났낭낮낯낱낳내낵낸낼냄냅냇냈냉냐냑냔냘냠냥너넉넋넌널넒넓넘넙넛넜넝넣네넥넨넬넴넵넷넸넹녀녁년녈념녑녔녕녘녜녠노녹논놀놂놈놉놋농높놓놔놘놜놨뇌뇐뇔뇜뇝뇟뇨뇩뇬뇰뇹뇻뇽누눅눈눋눌눔눕눗눙눠눴눼뉘뉜뉠뉨뉩뉴뉵뉼늄늅늉느늑는늘늙늚늠늡늣능늦늪늬늰늴니닉닌닐닒님닙닛닝닢다닥닦단닫달닭닮닯닳담답닷닸당닺닻닿대댁댄댈댐댑댓댔댕댜더덕덖던덛덜덞덟덤덥덧덩덫덮데덱덴델뎀뎁뎃뎄뎅뎌뎐뎔뎠뎡뎨뎬도독돈돋돌돎돐돔돕돗동돛돝돠돤돨돼됐되된될됨됩됫됴두둑둔둘둠둡둣둥둬뒀뒈뒝뒤뒨뒬뒵뒷뒹듀듄듈듐듕드득든듣들듦듬듭듯등듸디딕딘딛딜딤딥딧딨딩딪따딱딴딸땀땁땃땄땅땋때땍땐땔땜땝땟땠땡떠떡떤떨떪떫떰떱떳떴떵떻떼떽뗀뗄뗌뗍뗏뗐뗑뗘뗬또똑똔똘똥똬똴뙈뙤뙨뚜뚝뚠뚤뚫뚬뚱뛔뛰뛴뛸뜀뜁뜅뜨뜩뜬뜯뜰뜸뜹뜻띄띈띌띔띕띠띤띨띰띱띳띵라락란랄람랍랏랐랑랒랖랗래랙랜랠램랩랫랬랭랴략랸럇량러럭런럴럼럽럿렀렁렇레렉렌렐렘렙렛렝려력련렬렴렵렷렸령례롄롑롓로록론롤롬롭롯롱롸롼뢍뢨뢰뢴뢸룀룁룃룅료룐룔룝룟룡루룩룬룰룸룹룻룽뤄뤘뤠뤼뤽륀륄륌륏륑류륙륜률륨륩륫륭르륵른를름릅릇릉릊릍릎리릭린릴림립릿링마막만많맏말맑맒맘맙맛망맞맡맣매맥맨맬맴맵맷맸맹맺먀먁먈먕머먹먼멀멂멈멉멋멍멎멓메멕멘멜멤멥멧멨멩며멱면멸몃몄명몇몌모목몫몬몰몲몸몹못몽뫄뫈뫘뫙뫼묀묄묍묏묑묘묜묠묩묫무묵묶문묻물묽묾뭄뭅뭇뭉뭍뭏뭐뭔뭘뭡뭣뭬뮈뮌뮐뮤뮨뮬뮴뮷므믄믈믐믓미믹민믿밀밂밈밉밋밌밍및밑바박밖밗반받발밝밞밟밤밥밧방밭배백밴밸뱀뱁뱃뱄뱅뱉뱌뱍뱐뱝버벅번벋벌벎범법벗벙벚베벡벤벧벨벰벱벳벴벵벼벽변별볍볏볐병볕볘볜보복볶본볼봄봅봇봉봐봔봤봬뵀뵈뵉뵌뵐뵘뵙뵤뵨부북분붇불붉붊붐붑붓붕붙붚붜붤붰붸뷔뷕뷘뷜뷩뷰뷴뷸븀븃븅브븍븐블븜븝븟비빅빈빌빎빔빕빗빙빚빛빠빡빤빨빪빰빱빳빴빵빻빼빽뺀뺄뺌뺍뺏뺐뺑뺘뺙뺨뻐뻑뻔뻗뻘뻠뻣뻤뻥뻬뼁뼈뼉뼘뼙뼛뼜뼝뽀뽁뽄뽈뽐뽑뽕뾔뾰뿅뿌뿍뿐뿔뿜뿟뿡쀼쁑쁘쁜쁠쁨쁩삐삑삔삘삠삡삣삥사삭삯산삳살삵삶삼삽삿샀상샅새색샌샐샘샙샛샜생샤샥샨샬샴샵샷샹섀섄섈섐섕서석섞섟선섣설섦섧섬섭섯섰성섶세섹센셀셈셉셋셌셍셔셕션셜셤셥셧셨셩셰셴셸솅소속솎손솔솖솜솝솟송솥솨솩솬솰솽쇄쇈쇌쇔쇗쇘쇠쇤쇨쇰쇱쇳쇼쇽숀숄숌숍숏숑수숙순숟술숨숩숫숭숯숱숲숴쉈쉐쉑쉔쉘쉠쉥쉬쉭쉰쉴쉼쉽쉿슁슈슉슐슘슛슝스슥슨슬슭슴습슷승시식신싣실싫심십싯싱싶싸싹싻싼쌀쌈쌉쌌쌍쌓쌔쌕쌘쌜쌤쌥쌨쌩썅써썩썬썰썲썸썹썼썽쎄쎈쎌쏀쏘쏙쏜쏟쏠쏢쏨쏩쏭쏴쏵쏸쐈쐐쐤쐬쐰쐴쐼쐽쑈쑤쑥쑨쑬쑴쑵쑹쒀쒔쒜쒸쒼쓩쓰쓱쓴쓸쓺쓿씀씁씌씐씔씜씨씩씬씰씸씹씻씽아악안앉않알앍앎앓암압앗았앙앝앞애액앤앨앰앱앳앴앵야약얀얄얇얌얍얏양얕얗얘얜얠얩어억언얹얻얼얽얾엄업없엇었엉엊엌엎에엑엔엘엠엡엣엥여역엮연열엶엷염엽엾엿였영옅옆옇예옌옐옘옙옛옜오옥온올옭옮옰옳옴옵옷옹옻와왁완왈왐왑왓왔왕왜왝왠왬왯왱외왹왼욀욈욉욋욍요욕욘욜욤욥욧용우욱운울욹욺움웁웃웅워웍원월웜웝웠웡웨웩웬웰웸웹웽위윅윈윌윔윕윗윙유육윤율윰윱윳융윷으윽은을읊음읍읏응읒읓읔읕읖읗의읜읠읨읫이익인일읽읾잃임입잇있잉잊잎자작잔잖잗잘잚잠잡잣잤장잦재잭잰잴잼잽잿쟀쟁쟈쟉쟌쟎쟐쟘쟝쟤쟨쟬저적전절젊점접젓정젖제젝젠젤젬젭젯젱져젼졀졈졉졌졍졔조족존졸졺좀좁좃종좆좇좋좌좍좔좝좟좡좨좼좽죄죈죌죔죕죗죙죠죡죤죵주죽준줄줅줆줌줍줏중줘줬줴쥐쥑쥔쥘쥠쥡쥣쥬쥰쥴쥼즈즉즌즐즘즙즛증지직진짇질짊짐집짓징짖짙짚짜짝짠짢짤짧짬짭짯짰짱째짹짼쨀쨈쨉쨋쨌쨍쨔쨘쨩쩌쩍쩐쩔쩜쩝쩟쩠쩡쩨쩽쪄쪘쪼쪽쫀쫄쫌쫍쫏쫑쫓쫘쫙쫠쫬쫴쬈쬐쬔쬘쬠쬡쭁쭈쭉쭌쭐쭘쭙쭝쭤쭸쭹쮜쮸쯔쯤쯧쯩찌찍찐찔찜찝찡찢찧차착찬찮찰참찹찻찼창찾채책챈챌챔챕챗챘챙챠챤챦챨챰챵처척천철첨첩첫첬청체첵첸첼쳄쳅쳇쳉쳐쳔쳤쳬쳰촁초촉촌촐촘촙촛총촤촨촬촹최쵠쵤쵬쵭쵯쵱쵸춈추축춘출춤춥춧충춰췄췌췐취췬췰췸췹췻췽츄츈츌츔츙츠측츤츨츰츱츳층치칙친칟칠칡침칩칫칭카칵칸칼캄캅캇캉캐캑캔캘캠캡캣캤캥캬캭컁커컥컨컫컬컴컵컷컸컹케켁켄켈켐켑켓켕켜켠켤켬켭켯켰켱켸코콕콘콜콤콥콧콩콰콱콴콸쾀쾅쾌쾡쾨쾰쿄쿠쿡쿤쿨쿰쿱쿳쿵쿼퀀퀄퀑퀘퀭퀴퀵퀸퀼큄큅큇큉큐큔큘큠크큭큰클큼큽킁키킥킨킬킴킵킷킹타탁탄탈탉탐탑탓탔탕태택탠탤탬탭탯탰탱탸턍터턱턴털턺텀텁텃텄텅테텍텐텔템텝텟텡텨텬텼톄톈토톡톤톨톰톱톳통톺톼퇀퇘퇴퇸툇툉툐투툭툰툴툼툽툿퉁퉈퉜퉤튀튁튄튈튐튑튕튜튠튤튬튱트특튼튿틀틂틈틉틋틔틘틜틤틥티틱틴틸팀팁팃팅파팍팎판팔팖팜팝팟팠팡팥패팩팬팰팸팹팻팼팽퍄퍅퍼퍽펀펄펌펍펏펐펑페펙펜펠펨펩펫펭펴편펼폄폅폈평폐폘폡폣포폭폰폴폼폽폿퐁퐈퐝푀푄표푠푤푭푯푸푹푼푿풀풂품풉풋풍풔풩퓌퓐퓔퓜퓟퓨퓬퓰퓸퓻퓽프픈플픔픕픗피픽핀필핌핍핏핑하학한할핥함합핫항해핵핸핼햄햅햇했행햐향허헉헌헐헒험헙헛헝헤헥헨헬헴헵헷헹혀혁현혈혐협혓혔형혜혠혤혭호혹혼홀홅홈홉홋홍홑화확환활홧황홰홱홴횃횅회획횐횔횝횟횡효횬횰횹횻후훅훈훌훑훔훗훙훠훤훨훰훵훼훽휀휄휑휘휙휜휠휨휩휫휭휴휵휸휼흄흇흉흐흑흔흖흗흘흙흠흡흣흥흩희흰흴흼흽힁히힉힌힐힘힙힛힝
　、。·‥…¨〃­―∥＼∼‘’“”〔〕〈〉《》「」『』【】±×÷≠≤≥∞∴°′″℃Å￠￡￥♂♀∠⊥⌒∂∇≡≒§※☆★○●◎◇◆□■△▲▽▼→←↑↓↔〓≪≫√∽∝∵∫∬∈∋⊆⊇⊂⊃∪∩∧∨￢⇒⇔∀∃´～ˇ˘˝˚˙¸˛¡¿ː∮∑∏¤℉‰◁◀▷▶♤♠♡♥♧♣⊙◈▣◐◑▒▤▥▨▧▦▩♨☏☎☜☞¶†‡↕↗↙↖↘♭♩♪♬㉿㈜№㏇™㏂㏘℡€®㉾！＂＃＄％＆＇（）＊＋，－．／０１２３４５６７８９：；＜＝＞？＠ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ［￦］＾＿｀ａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚ｛｜｝￣ㄱㄲㄳㄴㄵㄶㄷㄸㄹㄺㄻㄼㄽㄾㄿㅀㅁㅂㅃㅄㅅㅆㅇㅈㅉㅊㅋㅌㅍㅎㅏㅐㅑㅒㅓㅔㅕㅖㅗㅘㅙㅚㅛㅜㅝㅞㅟㅠㅡㅢㅣㅤㅥㅦㅧㅨㅩㅪㅫㅬㅭㅮㅯㅰㅱㅲㅳㅴㅵㅶㅷㅸㅹㅺㅻㅼㅽㅾㅿㆀㆁㆂㆃㆄㆅㆆㆇㆈㆉㆊㆋㆌㆍㆎⅰⅱⅲⅳⅴⅵⅶⅷⅸⅹⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψω─│┌┐┘└├┬┤┴┼━┃┏┓┛┗┣┳┫┻╋┠┯┨┷┿┝┰┥┸╂┒┑┚┙┖┕┎┍┞┟┡┢┦┧┩┪┭┮┱┲┵┶┹┺┽┾╀╁╃╄╅╆╇╈╉╊㎕㎖㎗ℓ㎘㏄㎣㎤㎥㎦㎙㎚㎛㎜㎝㎞㎟㎠㎡㎢㏊㎍㎎㎏㏏㎈㎉㏈㎧㎨㎰㎱㎲㎳㎴㎵㎶㎷㎸㎹㎀㎁㎂㎃㎄㎺㎻㎼㎽㎾㎿㎐㎑㎒㎓㎔Ω㏀㏁㎊㎋㎌㏖㏅㎭㎮㎯㏛㎩㎪㎫㎬㏝㏐㏓㏃㏉㏜㏆ÆЪĦIJĿŁØŒºÞŦŊ㉠㉡㉢㉣㉤㉥㉦㉧㉨㉩㉪㉫㉬㉭㉮㉯㉰㉱㉲㉳㉴㉵㉶㉷㉸㉹㉺㉻ⓐⓑⓒⓓⓔⓕⓖⓗⓘⓙⓚⓛⓜⓝⓞⓟⓠⓡⓢⓣⓤⓥⓦⓧⓨⓩ①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮½⅓⅔¼¾⅛⅜⅝⅞æđðħıijĸŀłøœßþŧŋʼn㈀㈁㈂㈃㈄㈅㈆㈇㈈㈉㈊㈋㈌㈍㈎㈏㈐㈑㈒㈓㈔㈕㈖㈗㈘㈙㈚㈛⒜⒝⒞⒟⒠⒡⒢⒣⒤⒥⒦⒧⒨⒩⒪⒫⒬⒭⒮⒯⒰⒱⒲⒳⒴⒵⑴⑵⑶⑷⑸⑹⑺⑻⑼⑽⑾⑿⒀⒁⒂¹²³⁴ⁿ₁₂₃₄ぁあぃいぅうぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづてでとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆょよらりるれろゎわゐゑをんァアィイゥウェエォオカガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロヮワヰヱヲンヴヵヶАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдеёжзийклмнопрстуфхцчшщъыьэюя
갋갣걥겷괐괢굠굥궸귕귬긂긇긓깄깯꺆꺍껓껕꼉꼳꽅꽸꿘뀰뀼낻냗냡냣냬넏넢넫녇녱놁놑놰뇄뇡뇸눍눝뉻늗늧늼닁닏닽댠됭둗둚뒙딮딷똠똡똣똭똰뙇뙜뚧뜳뜽뜾랃랟랲럔럲럳렜렫롣롹뢔뤤맜맟맫먄몱뫠뫴뭥뮊뮹믁믕믜밷뱜뱡볌볻볿봥뵴붠붴뷁븡븨빋빧뺜뽓뾱뿕뿝쀠쁭샏샾섁섿셱솀솁솓쇵숖슌싥싳싿쎔쎠쎤쎵쎼쏼쑝쒐쒬씃씿앋앜얬얭옏옝옦옫왘왭왰욷웇웟웻윾읩읭읻잌잍쟵젇젉좬즒즤짣짲쫃쫒쬲쮓찓찟쵀췍칢칮칰칻캨캰컄켘콛쾃쿈쿽퀌퀜퀠큲킄탇턻톧퇻툶퉷팓팤팯펵퐉핰핳핻햏햔햣헗헠헡헣헿홥홨횽훕흝힣



5) unicode-range 속성을 사용하자

(1) 다국어를 쓸 때 유용한 속성

  • 만약 서비스가 다국어를 제공한다면, 각 나라별로 필요한 웹폰트만 로드하는 게 좋다.
  • @font-face에서 unicode-range 속성을 사용하면 나라별로 필요한 폰트만 다운로드할 수 있다.
@font-face {
  font-family: 'korea font';
  font-weight: 400;
  src: local('korea font'),
    url(woff2-foo-font-ko-path) format('woff2'),
    url(woff-foo-font-ko-path) format('woff'),
  unicode-range: U+1100-U+11FF; /* 한글만 다운로드 */
}

@font-face {
  font-family: 'latin font';
  font-weight: 400;
  src: local('latin font'),
    url(woff2-foo-font-path) format('woff2'),
    url(woff-foo-font-path) format('woff'),
  unicode-range: U+000-5FF;    /* 라틴어만 다운로드 */
}





이번 시간에는 웹 폰트를 최적화하는 5가지 방법을 알아보았다.

첫 번째 방법은 preload를 사용해 폰트 로딩 시점을 앞당기는 방법이고,
두 번째 방법은 load API를 사용해 로딩 시점을 커스터마이징하는 것이며,
세 번째 방법은 압축률이 높은 웹 폰트 형식 사용하기,
네 번째는 불필요한 글자를 제거한 서브셋 폰트로 사용하기,
마지막으로는 unicode-range가 있었다.

이 외에도 캐싱, font-display, service-worker를 쓰는 등 여러가지 방법이 있는데, 본인의 서비스 상황에 맞춰 사용하면 좋을 듯 하다 :)

반응형

'개발 기술 > 개발 이야기' 카테고리의 다른 글

Storybook, UI 컴포넌트를 테스트하게 해줘!(feat. vite)  (0) 2023.01.15
리플로우, 리페인트와 브라우저 렌더링 알아보기  (2) 2023.01.02
husky로 Conventional Commit 체크하기  (2) 2022.11.19
[CSS] Media Query 비교연산자(<, >, =)  (0) 2022.11.09
[JS/Module] CommonJS와 ES Modules는 무엇일까?  (0) 2022.11.07

관련글

댓글

티스토리툴바