Web Fonts from data

OL Connect Professional Designer
1

Hi there,

Is it possible to pass a google fonts url from the data file into a template?

I’m setting up a print job from a client’s web application where they are suppling the data as json. I have the google fonts url in the json.

This google font will be static for each data file but could be different for each data file we receive.

Thanks

Michael

2

Hello @MichaelEngstrom, for what content type would you like to include these dynamic web fonts? Is it for web content, for example? Because for web content I expect this to be possible but not for print content.

Standard Script

Name: Example
Selector: head

// Replace '#' with the correct URL
var result = '<link rel="stylesheet" type="text/css" href="#">';

results.append(result);
3

HI Marten,

Sorry I should have said this is in a print template.

Is there likely to be some other work around for print context?

Is this something that could possibly be added to print contexts in the future?

thanks Michael

4

I don’t see why this would not be possible for a print template, but you’ll probably need to embed a <style> element rather than adding a <link>.

The following standard script with selector “head” seems to work fine:

const url = "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap";
const family = "Roboto";

results.append(`<style>@import url('${url}')</style>`);
query("p").css("font-family", family);

This is just an example with static data, but url and family can be pulled from fields instead.

2 Likes