1

I've got to set up a simple news-blog-style frontpage for a website. The content is being edited by CKEditor.

According to this question I've managed that it is possible to select several Google Web Fonts in the editor.

The problem now is, that I have to load these fonts also into the frontpage. But I don't know which fonts are used anyway. Loading all of them seems to be a bit exaggurated, if only e.g. three of the fonts are being used anyway. But as the content changes I can't be sure about the fonts.

Is there a way to know which fonts are needed and then only import these into the frontpage?

And if this is not possible...

What is the best way to load all of these fonts into the front page?

Populus
  • 7,470
  • 3
  • 38
  • 54
Trollwut
  • 541
  • 1
  • 7
  • 23
  • Are you saying that the editor has an option to change the font of the text it is editing but you only want to load the fonts that are used? (ie. if the font is not changed in the editor, load only the default font) – Erik Berkun-Drevnig Jul 14 '15 at 17:14
  • Yes, that should nail it. So when I'm using three fonts, it should load those three fonts and not the whole package of *over 9000* fonts. – Trollwut Jul 14 '15 at 17:15
  • 1
    I don't know why someone down voted this, it seems like a good question to me. – Erik Berkun-Drevnig Jul 14 '15 at 17:48

2 Answers2

1

First, this solution assumes you're using the Google Web Font plugin for CKEditor: http://ckeditor.com/addon/ckeditor-gwf-plugin

You can subscribe to CKEditor changes and then parse the resulting html for google font families. Here's an example using the base example from the plugin page:

var editor = CKEDITOR.replace( 'editor1',{
    toolbar: [
        ['Font', 'FontSize']
    ],
            startupFocus: true,
            fillEmptyBlocks: false,
            autoParagraph: false,
            resize_enabled: false
});

editor.on('change', function(event){
    console.log(event.editor.getData());
});

For a sample input where I selected two web fonts for different pieces of text it outputs the following as an html string:

<span style="font-family:actor;">Hello world</span> <span style="font-family:allerta stencil;">It&#39;s nice to meet you.&nbsp;</span>
<link href="https://fonts.googleapis.com/css?family=Actor" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Allerta Stencil" rel="stylesheet" type="text/css" />

It's worth noting that it appears the data already includes the requisite links to the in use font families However, that html string could easily be parsed to get, ['Actor', 'Allerta Stencil'], to persist and load dynamically on frontpage load by Web Font Loader. Here's a fiddle that returns an array of font-family names from the output string: https://jsfiddle.net/v4tnynu2/

Check out Web Font Loader by Google and Typekit: https://developers.google.com/fonts/docs/webfont_loader

It allows you to dynamically load web fonts after page load:

WebFont.load({
    google: { 
        families: ['Actor', 'Allerta Stencil'] 
    } 
});
Ryan Neuffer
  • 782
  • 4
  • 8
  • How does this solution determine which fonts are used and avoid loading ones that aren't? – Erik Berkun-Drevnig Jul 14 '15 at 17:30
  • Couldn't see that, too. At least it would increase loading times by loading the fonts after page load. (That would contribute to my second option of solving my problem.) – Trollwut Jul 14 '15 at 17:40
  • I'm looking into subscribing to the CKEditor change event to parse the data for google web fonts in use: http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-change. You could then persist the list of families and load them on the front page. – Ryan Neuffer Jul 14 '15 at 17:55
  • I updated my solution to show how you could update a dynamic list of currently in use google web fonts. If you can't figure out how to parse the html string to get the array of families let me know and I'll post a fiddle. – Ryan Neuffer Jul 14 '15 at 18:33
  • I updated the solution with a fiddle for parsing the CKEditor output data for font-families. – Ryan Neuffer Jul 14 '15 at 19:04
  • Wow, that's an awesome solution! My only thought is, that it's tied to CKEditor, which makes this case more specific. Anyway it would work. Let me wait a few days if there is a more general solution, but I don't have much faith in it. :D – Trollwut Jul 15 '15 at 10:37
0

I don't know what your setup is like, but there are two options I can think of:

  1. Use JavaScript to search the HTML document for whatever the editor uses to change the font family, whether it is an inline style such as font-family: Whatever; or a CSS class like <span class="otherfont">...</span>. Then load the required font with JS.
  2. Keep track of which fonts are used in the backend. This would probably involve modifying the editor so that that on save, it stores which fonts have been used to the database and then your CMS template would check whether a font is used on a particular page before including it.
Erik Berkun-Drevnig
  • 2,306
  • 23
  • 38