mbg1346 - 네이버 나눔스퀘어 네오 NanumSquareNeo 웹 폰트 적용하기

Extra Form
원작자	80san
적용여부	적용
적용페이지	https://moonhouse.co.kr
적용시점 버전	Rhymix 2.1.14

네이버 나눔스퀘어 네오(NanumSquareNeo) 웹폰트를 적용하는 방법입니다.

네이버 나눔스퀘어 네오 문장을 더 돋보이게, 네이버의 새로운 브랜드 폰트 from CAMPAIGN.NAVER.COM

위의 링크에 접속해 보면 네이버 나눔스퀘어 네오의 특징들을 볼 수 있습니다.

적용하고자하는 레이아웃이나 프로그램의 css파일을 불러와서 상단에 아래의 코드를 적용하시면 됩니다.

@font-face{
    font-display: swap;
    font-family: NanumSquareNeo;
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.ttf) format("truetype");
    font-weight:100;
    
}
@font-face{
    font-display: swap;
    font-family: NanumSquareNeo;
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.ttf) format("truetype");
    font-weight:300;
}
@font-face{
    font-display: swap;
    font-family: NanumSquareNeo;
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.ttf) format("truetype");
    font-weight:400;
}
@font-face{
    font-display: swap;
    font-family: NanumSquareNeo;
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.ttf) format("truetype");
    font-weight:500;
}
@font-face{
    font-display: swap;
    font-family: NanumSquareNeo;
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.ttf) format("truetype");
    font-weight:700;
}

body, a, p, div, span, table, ul, li, img, h1, h2, h3, h4, h5, h6, header, textarea, form, footer, caption, section, button, select, html, i, nav, iframe, ol, strong, tbody, tfoot, thead, th, tr, abbr, object, acronym, address, applet, article, aside, audio, b, blockquote, big, center, canvas, cite, code, command, datalist, dd, del, details, dfn, dl, dt, em, embed, fieldset, figcaption, figure, font, hgroup, ins, kbd, keygen, label, legend, meter, output, pre, progress, q, s, samp, small, source, strike, sub, sup, tdvideo, tt, u, var { font-family: "NanumSquareNeo", sans-serif; font-size:14px; font-weight:400; }

font-size와 font-weight는 자신에세 맞게 조정하시면 됩니다.

네이버 나눔스퀘어 네오 NanumSquareNeo 웹 폰트 적용하기

단축키

Articles