Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Font name selection doesn't work !!

See original GitHub issue

Hi,

When I have the following style on my page the font-name selector does not work. I write some text on the editor, select the text and chose a font name but the editor does not change the font-family.

The error only appears when I put the following code: In the fontname dropdown appears “Roboto” and I can’t change the font always appears “Roboto” selected.

<style>
   @import url(http://fonts.googleapis.com/css?family=Roboto:400italic,400);
   * {
    font-family: "Roboto", Helvetica, sans-serif;
    font-size: 12px;
    letter-spacing: 0.5px;
   }
  </style>

This is my source code:

<!DOCTYPE html>
<html>
<head>

 <link href="/js/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
 <link href="/js/bootstrap/3.3.6/css/theme-cosmo.min.css" rel="stylesheet">    
 <link href="/js/summernote/summernote.css" rel="stylesheet" type="text/css">                
 <style>
   @import url(http://fonts.googleapis.com/css?family=Roboto:400italic,400);
   * {
    font-family: "Roboto", Helvetica, sans-serif;
    font-size: 12px;
    letter-spacing: 0.5px;
   }

  </style>
  </head>

<body style="margin-top:6px;margin-left:2px">
   <textarea id="descActivity"></textarea>

 <script type="text/javascript" src="/js/jquery/2.2.1/jquery.min.js"></script>
 <script type="text/javascript" src="/js/bootstrap/3.3.6/js/bootstrap.min.js"></script>      
 <script type="text/javascript" src="/js/summernote/summernote.js"></script>
 <script type="text/javascript" src="/js/summernote/lang/es-ES.js"></script>

 <script>
                $(document).ready(function(){
                  // Initialize WYSIWYG Editor.
                  $("#descActivity").summernote({
                      height: 250,
                      lang: "es-ES",
                      disableDragAndDrop: true,
                      toolbar: [
                        ["style", ["style"]],
                        ["font", ["bold", "italic", "underline", "clear"]],
                        ["fontname", ["fontname"]],
                        ["color", ["color"]],
                        ["para", ["ul", "ol", "paragraph"]],
                        ["height", ["height"]],
                        ["table", ["table"]],
                        ["insert", ["link", "hr"]],
                        ["view", ["fullscreen", "codeview"]],
                        ["help", ["help"]]
                      ],
                      callbacks: {
                        onImageUpload: function(files) {
                          // Evitamos que se puedan pegar imágenes.
                          null;       
                        }
                      }
                  });                          
                });
 </script>                          
</body>
</html>

What is your browser and OS? Windows 7 Chrome 51

Any idea? I’ve checked out the console but no error.

Thanks in advance.

Issue Analytics

State:
Created 7 years ago
Comments:9 (2 by maintainers)

Top GitHub Comments

4reactions

anpegarcommented, Dec 17, 2016

@capiman13 That is, this is the last configuration that I use but still if you change the fontName and don’t write anything summernote doesn’t change the font selector.

$("#myTextArea").summernote({
                 height: 250,
                 lang: "es-ES",
                 disableDragAndDrop: true,   
                 fontNamesIgnoreCheck: ["Roboto"],
                 fontNames: ["Roboto","Arial", "Arial Black", "Comic Sans MS", "Courier New",
                             "Helvetica Neue", "Helvetica", "Impact", "Lucida Grande",
                             "Tahoma", "Times New Roman", "Verdana"],
                 toolbar: [
                   ["style", ["style"]],
                   ["font", ["bold", "italic", "underline", "clear"]],
                   ["fontsize", ["fontsize"]],
                   ["fontname", ["fontname"]],
                   ["color", ["color"]],
                   ["para", ["ul", "ol", "paragraph"]],
                   ["height", ["height"]],
                   ["table", ["table"]],
                   ["insert", ["link", "hr"]],
                   ["view", ["fullscreen", "codeview"]],
                   ["help", ["help"]]
                 ],
                 callbacks: {
                   onImageUpload: function(files) {
                     
                     null;       
                   }
                 }
            }); 

// preselect the fontName 
$(".note-editable").css("font-size","14px");            
$(".note-editable").css("font-family","Roboto");

0reactions

pvanoudheusdencommented, Feb 22, 2017

I also got this bug that the selected font-family doenst appear to be selected. But when i start to type in the editor, the fontfamily changes. Any solution yet for this bug?

Top Results From Across the Web

Troubleshooting Installed Fonts That Won't Work

Easiest fix: Download and reinstall the correct version of the file, making sure the font is compatible with your operating system.

Unable to select font in word or excel font list does not work

When I click on the drop down list of fonts nothing happens. It simply does not respond. I can highlight the font name...

Word Fails to Show Font Name and Other Formatting Values

This article explains the rules that apply to the way Word shows/doesn't show formatting information. Free macro - lets you perform formatting check....

Why isn't my <select> "font-family" property inheriting from ...

If you use: select { font-family: inherit; }. It'll work fine. CSS is a little quirky when it comes to form controls.

Troubleshoot font issues

Select text or text layer(s) using a variable font. Click the to open the font style drop-down menu. Select Variable font axes... menu-variable- ......