ember-cli-google-fonts

2.16.2 verified Sat Apr 25 auth: no javascript

An Ember addon (v2.16.2) that lazily adds Google Fonts to an Ember application by injecting font declarations into the `content-for: head` hook, avoiding inclusion in CSS files. Supports Ember projects targeting Node 4.5+, 6.*, or 7.*. Follows Ember 2.x versioning. Differentiators: minimal configuration via environment.js, automatic Content Security Policy updates, and lazy loading without blocking render.

Common errors

error Refused to load the font '<URL>' because it violates the following Content Security Policy directive: 'font-src 'self''. ↓

cause Missing fonts.gstatic.com in font-src CSP.

fix

Add 'font-src': "'self' fonts.gstatic.com" to contentSecurityPolicy.

error Error: Could not find module 'ember-cli-google-fonts' imported from 'my-app/components/my-component' ↓

cause Addon not properly installed or registered.

fix

Run 'ember install ember-cli-google-fonts' again or add to package.json and run npm install. Ensure ember-cli-build.js includes it.

error TypeError: googleFonts.split is not a function ↓

cause googleFonts config is a string instead of an array.

fix

Change 'googleFonts: "Open+Sans:300,400,700"' to 'googleFonts: ["Open+Sans:300,400,700"]' in config/environment.js.

Warnings

gotcha Google requires an API key for usage; this addon does not handle key authentication. Public fonts work without key, but new projects may require key. ↓

fix Set environment variable GOOGLE_FONTS_API_KEY or use API key in config.

breaking In v2.0.0, the configuration property name changed from 'googleFonts' to 'googleFonts' (same), but the format changed from a string to an array. ↓

fix Update config to use array format: ['Open+Sans:300,400,700'] instead of 'Open+Sans:300,400,700'.

gotcha The addon does not lazy load fonts as of v2.16.2; fonts are loaded synchronously in head. Future versions may support lazy loading. ↓

fix Manually add loading='lazy' attribute if asynchronous loading is needed.

Install

npm install ember-cli-google-fonts

yarn add ember-cli-google-fonts

pnpm add ember-cli-google-fonts

Imports

googleFonts config
wrong
```
googleFonts: 'Open+Sans:300,400,700'
```
correct
```
// in config/environment.js
googleFonts: ['Open+Sans:300,400,700']
```
Configuration is an array of strings, not a single string. Each font family with optional weights/styles.

contentSecurityPolicy

wrong

contentSecurityPolicy: { 'font-src': 'fonts.gstatic.com' }

correct

// in config/environment.js
contentSecurityPolicy: {
  'font-src': "'self' fonts.gstatic.com",
  'style-src': "'self' fonts.googleapis.com"
}

Missing 'self' and style-src can break CSP. Must include both font-src and style-src with correct origins.

ember install
wrong
```
npm install ember-cli-google-fonts --save-dev
```
correct
```
ember install ember-cli-google-fonts
```
Use ember install to ensure blueprint runs. Manual npm install may miss addon registration.

Quickstart

Installs the addon and configures Google Fonts with Content Security Policy in an Ember project.

ember install ember-cli-google-fonts
// config/environment.js
module.exports = function(environment) {
  var ENV = {
    googleFonts: [
      'Open+Sans:300,400,700',
      'Roboto:300'
    ],
    contentSecurityPolicy: {
      'font-src': "'self' fonts.gstatic.com",
      'style-src': "'self' fonts.googleapis.com"
    }
  };
  return ENV;
};