How google fonts loads fonts dynamically

Question

In Google fonts website (https://fonts.google.com/) they add <li> elements dynamically on scroll. Those <li> elements has <a> tag with href attribute (screenshot bellow) with url value that points to the font page. Then deeper inside <li> there is <gf-content-editable> element which sets font-family CSS value to the actual font family.

Could someone explain how do they do that? Looking for a way to load fonts dynamically, but CSS Font Loading API is still experimental.

Thanks for any insights.

Since this is an inline-style, it's likely set using JavaScript. So a data object dictates all the fonts to be displayed, and then each font in the object is iterated over to create the <li> elements for each font-family. In this way they can automatically create href tags and set the font-style on each card. I could reproduce a barebones example of this for you if you'd like. — syedmh
Would be interesting as a only other option I had in my mind was to add to the <head> for every new font. You are welcome to provide an answer :) — bigInt

syedmh syedmh · Accepted Answer · 2020-05-18T12:57:50

One way to do this would be to create an object using data from a database or any other source, and iterating over it to dynamically create cards. A bare-bones example of this could be:

const data = [
    {
        fontFamily: 'Open Sans',
        href: 'Open+Sans+Condensed',
        // Other attributes
    },
    // Other fonts
]

for(const font of data) {

    let li, gridItemTemplate, gfFontPreview, a, section, gfContentEditable /*other elements*/;
    li = document.createElement('li')
    li.setAttribute('class', 'grid-list-tile is-in-last-column');
    // Other attributes

    gridItemTemplate = document.createElement('grid-item-template');

    gfFontPreview = document.createElement('gf-font-preview')
    gfFontPreview.setAttribute('class', 'grid-list-font-preview');
    // Other attributes

    a = document.createElement('a')
    a.setAttribute('class', 'https://fonts.google.com/specimen' + font.href);
    // Other attributes

    section = document.createElement('section');
    section.setAttribute('class', 'font-preview-card-static ...');

    gfContentEditable = document.createElement('gf-content-editable')
    gfContentEditable.setAttribute('class', 'preview-text-font-card static-font...')
    gfContentEditable.setAttribute('style', `font-size: 40px; line-height: 1.10909; font-family: "${font.fontFamily} script=latin rev=1"; weight: 300; font-style: normal;`);
    gfContentEditable.innerText = 'Almost before we knew it, we had left the ground.';

    document
        .body
        .appendChild(li)
        .appendChild(gridItemTemplate)
        .appendChild(gfFontPreview)
        .appendChild(a)
        .appendChild(section)
        .appendChild(gfContentEditable);

}

This is a pretty verbose way of writing this out. If you actually wish to create this as a function for your website, you can abstract a lot of this code out into separate functions, or use a templating engine or library to achieve this. I'm just sharing this to show how I could achieve this with just the information I have from the question.

How google fonts loads fonts dynamically

1 Answers