CKEditorにWEBフォントを設定する方法

Pocket

CKEDITOR.replace('ckeditor-input', {
        language: 'ja',
        contentsCss:'https://fonts.googleapis.com/earlyaccess/notosansjapanese.css',
        font_names:"源ノ角ゴシック/Noto Sans Japanese;",
        stylesSet:[{name:'フォント細い',element:'span',styles:{'font-weight':'200'}},
                    {name:'フォント標準',element:'span',styles:{'font-weight':'400'}},
                    {name:'フォント太い',element:'span',styles:{'font-weight':'700'}},
                    {name:'フォント極太',element:'span',styles:{'font-weight':'900'}},
        ],
        toolbar:[
            { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Font','FontSize','Styles','Bold', 'Italic', 'Underline', 'Strike', '-', 'RemoveFormat' ] },
            { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', '-', 'Undo', 'Redo' ] },
            { name: 'links', items: [ 'Link', 'Unlink' ] },
            { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule' ] },
            { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source' ] },
            '/',
            { name: 'colors', items: [ 'TextColor','BGColor']},
            { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote','-','JustifyLeft','JustifyCenter','JustifyRight'] },
            { name: '文字の太さ', items: [  'Format' ] },
            { name: 'tools', items: [ 'ShowBlocks','Maximize'] }
        ],
        // スペルチェック機能OFF
        scayt_autoStartup: false,
        // Enterを押した際に改行タグを挿入
        enterMode: CKEDITOR.ENTER_BR,
        // Shift+Enterを押した際に段落タグを挿入
        shiftEnterMode: CKEDITOR.ENTER_P,
        // idやclassを指定可能にする
        allowedContent: true,
        // 自動で空白を挿入しないようにする
        fillEmptyBlocks: false,
        // テンプレート挿入時に編集中の内容と置き換えるデフォルトのチェックを外す。
        templates_replaceContent: false,
        removePlugins:'divarea',
        basicEntities : false,
        entities : false
    });

3行目:

Google Fonts + 日本語 早期アクセスより「源ノ角ゴシック」の外部CSSを設定

 

4行目:

「プルダウンで表示されるフォント名」/「webフォントのfont-family」を指定

 

5行目〜8行目:

font-weightの設定方法がよくわからなかったのでとりあえず カスタムスタイルにfont-weightを設定

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です