[티스토리 꾸미기] 스킨 편집 Step 7 - 폰트 변경

개요

폰트 변경을 통해 나만의 스타일로 변경.

 

작업

pre {
    font-family: customFont, monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}

body {
    font-family: 'customFont', 'Noto Sans KR', Arial, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Nanum Gothic", Dotum, '돋움', Helvetica, sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.article-header .box-meta .category {
    margin-bottom: 12px;
    font-family: customFont;
    font-size: 14px;
    font-weight: 600;
}

.article-header .title-article {
    display: block;
    width: 100%;
    max-width: 760px;
    margin: 0 0 33px 0;
    font-family: customFont;
    font-size: 48px;
    font-weight: 400;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    word-break: keep-all;
}

.article-header .box-info .writer {
    font-family: customFont;
    margin-right: 15px;
}

.article-header .box-info .date {
    font-family: customFont;
    position: relative;
}

@media screen and (max-width: 1060px) {
    .article-header .box-meta {
        bottom: 36px;
    }

    .article-header .box-meta .category {
        font-family: customFont;
        font-size: 12px;
        font-weight: 400;
    }
    
    .article-header .title-article {
        padding-right: 30px;
        font-size: 30px;
    }

    .article-header .box-info {
        font-size: 11px;
        font-weight: 400;
    }

    .article-header .box-info .date:before {
        top: 8px;
    }
}

.article-view p {
    margin-bottom: 28px;
    font-family: customFont;
    font-size: 16px;
    line-height: 26px;
    color: #222;
}

@media screen and (max-width: 1060px) {
    .article-view p {
        font-family: customFont;
        font-size: 15px;
        line-height: 26px;
    }
}

/* *********************************************************************
   폰트 변경
   ****************************************************************** */
@font-face {
    font-family: 'customFont';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_220508@1.0/EliceDigitalBaeum_Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}