폰트 최적화 선별적 폰트 로딩으로 (◕‿◕)(Maplestory 폰트) 방법

폰트 최적화로 로딩 속도 향상방법

선별적인 폰트 로딩 방법

폰트 최적화는 검색엔진 최적화에서 로딩 속도에 상당한 부분을 차지하며 폰트의 로딩속도는 전반적인 사이트의 로딩속도에 영향을 줍니다. 그러한 폰트를 최적화하는 방법중 부분적으로 폰트를 사용하는 방법으로 검색엔진 로딩 속도를 최적화 할수있는 방법입니다. 필요한 폰트만을 부분적으로 사용하게 설정하면 검색엔진 최적화중 속도와 로딩에 많은 영향을 줄수 있습니다.

아래는 선별적으로 폰트를 사용하는 방법중 간단한 사용 예시와 코드를 공유하겠습니다.

자신이 지정하고 싶은 폰트를 전체코드를 사용하는 것보다는 필요한 부분만 적용해서 폰트의 불필요한 부분을 로드시키지 않게 하여서 검색 엔진 최적화를 적용하는 예입니다.

❝ unicode-range ❞

unicode-range 속성을 사용하면 특정 범위의 유니코드 문자만 폰트 파일에서 로드하도록 할 수 있습니다. 이를 통해 페이지 로드 속도를 최적화하고 불필요한 폰트 데이터를 다운로드하지 않도록 할 수 있습니다. unicode-range 속성을 사용할 때 유니코드 범위에 포함할 문자를 결정하는 기준은 페이지에 포함된 텍스트가 어떤 문자를 사용하는지에 달려 있습니다.

즉 한글과 영어 숫자만 적용할수도 있고 한글만 적용할수도 있습니다.

U+0000-007F : 영어
U+0030-0039 : 숫자 0-9
U+AC00-D7A3 : 한글

U+AC00-D7A3는 유니코드에서 한국어 한글 문자의 범위를 나타냅니다. 한국어 한글 문자의 범위 U+AC00부터 U+D7A3까지는 다음과 같은 의미를 가집니다

• U+AC00: 한글 문자 블록의 시작 코드문자. 이는 "가"라는 음절에 해당합니다.
• U+D7A3: 한글 문자 블록의 끝 코드문자. 이는 "히 ㅎ"이라는 음절에 해당합니다.
• 이 범위는 총 11,172개의 한글 문자를 포함하고 있습니다

U+AC00 - U+D7A3: 이 범위는 한국어에서 사용하는 모든 문자블록을 포함합니다. 이를 통해 한국어의 모든 단어를 표현할 수 있습니다.

유니코드(Unicode)는 전 세계의 모든 문자를 컴퓨터에서 일관되게 표현하고 다룰 수 있도록 설계된 국제 표준 코드 체계입니다. 이 코드 체계는 각 문자에 고유한 숫자 코드를 할당하여 문자를 표현합니다.

코드 형식

@font-face {
    font-family: 'Maplestory-Light';
    src: url(폰트url) format('woff2');
    font-display: swap;
    unicode-range: 
        U+0000-007F,  /* Basic Latin: 영어 */
        U+0030-0039,  /* 숫자 0-9 */
        U+AC00-D7A3;  /* Hangul Syllables: 한글 음절 */
}

위에 코드는 한글과 숫자 그리고 영어에만 폰트를 지정하게 해서 불필요한 나머지 문자 폰트를 로드시키지 않는 방법중 하나입니다. 유니코드는 전 세계의 모든 문자를 표준화된 방식으로 표현하는 시스템입니다. 각 문자는 고유한 코드 포인트(번호)를 가지며, 이 코드 포인트는 U+로 시작합니다.

Maplestory 폰트 다운로드 받기

Maplestory-Light (1).woff2

0.22MB

(◕‿◕) 아래는 유니코드를 확인할수 있는 사이트 입니다.

https://symbl.cc/en/

SYMBL (◕‿◕) Symbols, Emojis, Characters, Scripts, Alphabets, Hieroglyphs and the entire Unicode