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.

[BUG] Google Fonts not loading on Glyph on standalone HTML until interacting with Glyph

See original GitHub issue

Hello,

I’m having an issue with the font incorrectly displaying on my graph until after the user interacts with the it on my standalone HTML document.

Below is the python necessary to create the dummy data for the test:

import pandas as pd
from bokeh.models import ColumnDataSource
from bokeh.plotting import figure
from bokeh.embed import components

df1 = pd.DataFrame({"A":[1,2,3,4,5,6],
                   "B":[5,6,3,2,1,4]})

graph = ColumnDataSource(data= df1)

p = figure(plot_width=600, plot_height=400)
p.line(source = graph, x = 'A', y = 'B')

p.xaxis.axis_label = 'Number'
p.xaxis.axis_label_text_font = 'Roboto'
p.xaxis.axis_label_text_font_size = '14pt'
p.xaxis.major_label_text_font_size = '10pt'

p.yaxis.axis_label = 'Average'
p.yaxis.axis_label_text_font = 'Roboto'
p.yaxis.axis_label_text_font_size = '14pt'
p.yaxis.major_label_text_font_size = '10pt'

script, div = components(p)

As you can see in the above code, Roboto (A google font) was the selected font for the Major Axis. Using the script and div components from the above code we can create a standalone HTML document. Below is the Standalone HTML document with the necessary scripts and links added to the header (note the font.google link in the header):

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Bokeh Line Plot</title>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700" />
        <script src="https://cdn.bokeh.org/bokeh/release/bokeh-1.4.0.min.js"></script>
        <script type="text/javascript">
            (function() {
                  var fn = function() {
                    Bokeh.safely(function() {
                      (function(root) {
                        function embed_document(root) {

                        var docs_json = '{"acd6be22-a352-429f-bbb6-e0e40d198ca6":{"roots":{"references":[{"attributes":{"callback":null},"id":"5824","type":"DataRange1d"},{"attributes":{"source":{"id":"5822","type":"ColumnDataSource"}},"id":"5859","type":"CDSView"},{"attributes":{},"id":"5847","type":"HelpTool"},{"attributes":{"dimension":1,"ticker":{"id":"5838","type":"BasicTicker"}},"id":"5841","type":"Grid"},{"attributes":{"below":[{"id":"5832","type":"LinearAxis"}],"center":[{"id":"5836","type":"Grid"},{"id":"5841","type":"Grid"}],"left":[{"id":"5837","type":"LinearAxis"}],"plot_height":400,"renderers":[{"id":"5858","type":"GlyphRenderer"}],"title":{"id":"5861","type":"Title"},"toolbar":{"id":"5848","type":"Toolbar"},"x_range":{"id":"5824","type":"DataRange1d"},"x_scale":{"id":"5828","type":"LinearScale"},"y_range":{"id":"5826","type":"DataRange1d"},"y_scale":{"id":"5830","type":"LinearScale"}},"id":"5823","subtype":"Figure","type":"Plot"},{"attributes":{"line_alpha":0.1,"line_color":"#1f77b4","x":{"field":"A"},"y":{"field":"B"}},"id":"5857","type":"Line"},{"attributes":{},"id":"5846","type":"ResetTool"},{"attributes":{},"id":"5833","type":"BasicTicker"},{"attributes":{"line_color":"#1f77b4","x":{"field":"A"},"y":{"field":"B"}},"id":"5856","type":"Line"},{"attributes":{"callback":null,"data":{"A":[1,2,3,4,5,6],"B":[5,6,3,2,1,4],"index":[0,1,2,3,4,5]},"selected":{"id":"5867","type":"Selection"},"selection_policy":{"id":"5868","type":"UnionRenderers"}},"id":"5822","type":"ColumnDataSource"},{"attributes":{"axis_label":"Average","axis_label_text_font":"Roboto","axis_label_text_font_size":{"value":"14pt"},"formatter":{"id":"5862","type":"BasicTickFormatter"},"major_label_text_font_size":{"value":"10pt"},"ticker":{"id":"5838","type":"BasicTicker"}},"id":"5837","type":"LinearAxis"},{"attributes":{"data_source":{"id":"5822","type":"ColumnDataSource"},"glyph":{"id":"5856","type":"Line"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"5857","type":"Line"},"selection_glyph":null,"view":{"id":"5859","type":"CDSView"}},"id":"5858","type":"GlyphRenderer"},{"attributes":{"bottom_units":"screen","fill_alpha":{"value":0.5},"fill_color":{"value":"lightgrey"},"left_units":"screen","level":"overlay","line_alpha":{"value":1.0},"line_color":{"value":"black"},"line_dash":[4,4],"line_width":{"value":2},"render_mode":"css","right_units":"screen","top_units":"screen"},"id":"5866","type":"BoxAnnotation"},{"attributes":{},"id":"5843","type":"WheelZoomTool"},{"attributes":{"overlay":{"id":"5866","type":"BoxAnnotation"}},"id":"5844","type":"BoxZoomTool"},{"attributes":{},"id":"5842","type":"PanTool"},{"attributes":{},"id":"5867","type":"Selection"},{"attributes":{},"id":"5862","type":"BasicTickFormatter"},{"attributes":{"callback":null},"id":"5826","type":"DataRange1d"},{"attributes":{},"id":"5864","type":"BasicTickFormatter"},{"attributes":{"text":""},"id":"5861","type":"Title"},{"attributes":{"ticker":{"id":"5833","type":"BasicTicker"}},"id":"5836","type":"Grid"},{"attributes":{"axis_label":"Number","axis_label_text_font":"Roboto","axis_label_text_font_size":{"value":"14pt"},"formatter":{"id":"5864","type":"BasicTickFormatter"},"major_label_text_font_size":{"value":"10pt"},"ticker":{"id":"5833","type":"BasicTicker"}},"id":"5832","type":"LinearAxis"},{"attributes":{},"id":"5828","type":"LinearScale"},{"attributes":{},"id":"5838","type":"BasicTicker"},{"attributes":{},"id":"5830","type":"LinearScale"},{"attributes":{},"id":"5868","type":"UnionRenderers"},{"attributes":{},"id":"5845","type":"SaveTool"},{"attributes":{"active_drag":"auto","active_inspect":"auto","active_multi":null,"active_scroll":"auto","active_tap":"auto","tools":[{"id":"5842","type":"PanTool"},{"id":"5843","type":"WheelZoomTool"},{"id":"5844","type":"BoxZoomTool"},{"id":"5845","type":"SaveTool"},{"id":"5846","type":"ResetTool"},{"id":"5847","type":"HelpTool"}]},"id":"5848","type":"Toolbar"}],"root_ids":["5823"]},"title":"Bokeh Application","version":"1.4.0"}}';
                        var render_items = [{"docid":"acd6be22-a352-429f-bbb6-e0e40d198ca6","roots":{"5823":"03d9974b-b67c-4395-9dec-d23214a6cb55"}}];
                        root.Bokeh.embed.embed_items(docs_json, render_items);

                        }
                        if (root.Bokeh !== undefined) {
                          embed_document(root);
                        } else {
                          var attempts = 0;
                          var timer = setInterval(function(root) {
                            if (root.Bokeh !== undefined) {
                              clearInterval(timer);
                              embed_document(root);
                            } else {
                              attempts++;
                              if (attempts > 100) {
                                clearInterval(timer);
                                console.log("Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing");
                              }
                            }
                          }, 10, root)
                        }
                      })(window);
                    });
                  };
                  if (document.readyState != "loading") fn();
                  else document.addEventListener("DOMContentLoaded", fn);
                })();
        </script>
    </head>
    <body>
        <div class="bk-root" id="03d9974b-b67c-4395-9dec-d23214a6cb55" data-root-id="5823"></div>
    </body>
</html>

If you open this HTML (I used chrome), you will see the incorrect font for both the Major axis labels. If you click and move the graph, or interact with the graph in anyway, you will see the Major axis label font change to the correct font, Roboto.

I have been unsuccessful in opening the HTML with the font starting correctly. I have tried using the autoload_static() method to generate the script and create the HTML document this way and was unsuccessful. I also was convinced that I was missing something simple, so I posted this issue on stackoverflow. A user tried to get the font to display using the newer json_item API and stated that they were unsuccessful as well.

Initial load of HTML, notice the incorrect font on the Major Axis Labels: beforeMovingGlyph

After dragging the glyph, notice the correct font kicks in: AfterMovingGlyph

If any more information is needed, please let me know!

== Versions == Bokeh 1.4.0 Chrome 78.0.3904.108

Issue Analytics

State:
Created 4 years ago
Comments:6 (5 by maintainers)

Top GitHub Comments

2reactions

mattpapcommented, Nov 27, 2019

This isn’t an issue with rendering, because bokehjs can render the font just fine, as soon as it is available, which is the problem here. Font loader is independent of DOMContentLoaded event and provides its own mechanism for detecting when particular fonts are available. The big caveat is that one can’t just check the availability of a font, but has to check the availability of a particular CSS font specification (down to font size). It looks like this:

const font = "italic 10pt Roboto" // this is the CSS font used in this example
document.fonts.load(font).then((font_face) => {
  console.log(font_face)
  // render
})

Now it’s just a matter of integrating this into bokeh’s rendering pipeline. Coincidentally I’ve been working on making bokehjs more asynchronous aware, so this will fit nicely into that work.

0reactions

gmerritt123commented, Jan 5, 2022

I’ve made a post with another question/hurdle regarding this on the discourse: https://discourse.bokeh.org/t/template-theme-text-font-putting-it-all-together/8777 , happy to discuss here or there/whatever’s most appropriate etc.