如何将谷歌字体添加到tinymce？ [复制]答案

【问题标题】：How to add google fonts to tinymce? [duplicate]如何将谷歌字体添加到tinymce？ [复制]
【发布时间】：2016-11-10 12:27:24
【问题描述】：

嘿，我如何将谷歌字体添加到我的 tinymce 中？我想在“Fonte”下拉菜单中添加一些谷歌字体（查看图片）

已经尝试对另一个问题做同样的事情：

我在我的 content.min.css 中添加了这个（就在正文上方）：

@font-face{
    font-family:'aka_Dora';
    src:url('fonts/akaDora.eot') format('eot'),
        url('fonts/akaDora.woff') format('woff'),
        url('fonts/akaDora.ttf') format('truetype'),
        url('fonts/akaDora.svg#akaDora') format('svg');
    font-weight:normal;
    font-style:normal;
}

在 tinymce.init() 上

font_formats: 'aka_Dora=aka_Dora;' + 'Andale Mono=andale mono,times;'...

这就是发生的事情，它出现了字体但没有样式，当我键入时就像我在没有任何样式的情况下键入...

这是http://www.1001fonts.com/akadora-font.html的字体

我知道有 2 或 3 个帖子，但我不明白 :(

你能详细解释一下吗？因为我不太了解 css/js :(

这是我的 tinymce 的外观：

这是我的 tinymce.init：

<asp:Content ID="head" ContentPlaceHolderID="head" runat="Server">
    <script src="/App_Script/tinymce/js/tinymce/tinymce.min.js"></script>
    <script>
        tinymce.init({
            selector: 'textarea',
            height: 520,
            theme: 'modern',
            language_url: "/App_Script/tinymcelangs/pt_PT.js",
            resize: false,
            force_br_newlines: true,
            force_p_newlines : false,
            forced_root_block : '',
            plugins: [
              'advlist autolink lists link image charmap print preview hr anchor pagebreak',
              'searchreplace wordcount visualblocks visualchars code fullscreen',
              'insertdatetime media nonbreaking save table contextmenu directionality',
              'emoticons template paste textcolor colorpicker textpattern imagetools'
            ],
            plugin_preview_width: 750,
            plugin_preview_height: 600,
            menubar: false,
            toolbar1: 'insertfile undo redo | fontselect | fontsizeselect | superscript subscript | bullist numlist outdent indent | link image table',
            toolbar2: 'preview | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | forecolor backcolor emoticons',
            image_advtab: true,
            templates: [
              { title: 'Test template 1', content: 'Test 1' },
              { title: 'Test template 2', content: 'Test 2' }
            ],
            font_formats: 'Andale Mono=andale mono,times;' + 'Arial=arial,helvetica,sans-serif;' + 'Arial Black=arial black,avant garde;' + 'Book Antiqua=book antiqua,palatino;' + 'Comic Sans MS=comic sans ms,sans-serif;' + 'Courier New=courier new,courier;' + 'Georgia=georgia,palatino;' + 'Helvetica=helvetica;' + 'Impact=impact,chicago;' + 'Symbol=symbol;' + 'Tahoma=tahoma,arial,helvetica,sans-serif;' + 'Terminal=terminal,monaco;' + 'Times New Roman=times new roman,times;' + 'Trebuchet MS=trebuchet ms,geneva;' + 'Verdana=verdana,geneva;' + 'Webdings=webdings;' + 'Wingdings=wingdings,zapf dingbats',
            fontsize_formats: "8pt 9pt 10pt 11pt 12pt 14pt 16pt 18pt 20pt 22pt 24pt 26pt 28pt 36pt 48pt 72pt"

        });
    </script>
</asp:Content>
<asp:Content ID="body" ContentPlaceHolderID="body" runat="Server">
    <textarea id="txtMessageBody" runat="server"></textarea>
</asp:Content>

【问题讨论】：

@rlemon 不是，已经尝试过了，但失败了

标签： javascript css fonts tinymce

【解决方案1】：

已经解决了...

只需要在<head> 上添加一个来自字体的链接

<link href="https://fonts.googleapis.com/css?family=Aclonica|Ranga" rel="stylesheet"/>

而且我真的不需要下载字体来让它工作:)

【讨论】：