develog

[summernote] 한글 웹폰트 적용 본문

카테고리 없음

[summernote] 한글 웹폰트 적용

냐옴 2021. 4. 4. 04:16

font load

<style>
    @font-face {
        font-family: 'NotoSansKR';
        src: url('font/NotoSansKR-Black.otf') format('opentype')
    }
</style>

summernote init font

<script>
    $(document).ready(function() {
        var fontList = ['맑은 고딕','NotoSansKR'];
        $('#summernote').summernote({
            lang: 'ko-KR',
            fontNames: fontList,
            fontNamesIgnoreCheck: fontList,
        });
    });
</script>

full source

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SummernoteTest</title>

    <!-- include libraries(jQuery, bootstrap) -->
    <link  href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <!-- include summernote css/js -->
    <link  href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/lang/summernote-ko-KR.js"></script>

    <style>
        @font-face {
            font-family: 'NotoSansKR';
            src: url('font/NotoSansKR-Black.otf') format('opentype')
        }
    </style>

    <script>
        $(document).ready(function() {
            var fontList = ['맑은 고딕','NotoSansKR'];
            $('#summernote').summernote({
                lang: 'ko-KR',
                fontNames: fontList,
                fontNamesIgnoreCheck: fontList,
            });
        });
    </script>

</head>
<body>
    
    <div id="summernote">Summernote 테스트</div>

</body>
</html>
저작자표시 비영리 동일조건
Comments