Preact-cli: Adding Google Fonts

[timarney]

Is there any way to add to the index file to include Google Fonts?

[developit]

Totes - 3 options for this that I'm aware of.

1. Import it from some css:

// index.js
import './style/index.css';

/* style/index.css */
@import url('//fonts.googleapis.com/css?family=Open+Sans');

1. You can SSR it!

// index.js
export default () => (
  <div class="app">
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans" />
    {/* regular app stuff here */}
  </div>
);

1. Specify a custom HTML template and make it all your own. I recommend starting from the internal default HTML template:

preact build --html-template my-template.html

3.1 - you can also set the template from preact.config.js:

// preact.config.js in your repo root
export default (config, env, helpers) => {
 helpers.setHtmlTemplate(config, 'src/index.html');
};

The only issue with --html-template is that if preact-cli updates need a new template, you'll still have your custom one. If you can use VDOM to render the fonts, that'll be better.

[timarney]

Nice - thanks for taking time to show the options. Works great.