{"id":18301,"library":"ember-cli-google-fonts","title":"ember-cli-google-fonts","description":"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.","status":"active","version":"2.16.2","language":"javascript","source_language":"en","source_url":"https://github.com/damiencaselli/ember-cli-google-fonts","tags":["javascript","ember-addon","google-fonts","fonts"],"install":[{"cmd":"npm install ember-cli-google-fonts","lang":"bash","label":"npm"},{"cmd":"yarn add ember-cli-google-fonts","lang":"bash","label":"yarn"},{"cmd":"pnpm add ember-cli-google-fonts","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Configuration is an array of strings, not a single string. Each font family with optional weights/styles.","wrong":"googleFonts: 'Open+Sans:300,400,700'","symbol":"googleFonts config","correct":"// in config/environment.js\ngoogleFonts: ['Open+Sans:300,400,700']"},{"note":"Missing 'self' and style-src can break CSP. Must include both font-src and style-src with correct origins.","wrong":"contentSecurityPolicy: { 'font-src': 'fonts.gstatic.com' }","symbol":"contentSecurityPolicy","correct":"// in config/environment.js\ncontentSecurityPolicy: {\n  'font-src': \"'self' fonts.gstatic.com\",\n  'style-src': \"'self' fonts.googleapis.com\"\n}"},{"note":"Use ember install to ensure blueprint runs. Manual npm install may miss addon registration.","wrong":"npm install ember-cli-google-fonts --save-dev","symbol":"ember install","correct":"ember install ember-cli-google-fonts"}],"quickstart":{"code":"ember install ember-cli-google-fonts\n// config/environment.js\nmodule.exports = function(environment) {\n  var ENV = {\n    googleFonts: [\n      'Open+Sans:300,400,700',\n      'Roboto:300'\n    ],\n    contentSecurityPolicy: {\n      'font-src': \"'self' fonts.gstatic.com\",\n      'style-src': \"'self' fonts.googleapis.com\"\n    }\n  };\n  return ENV;\n};","lang":"javascript","description":"Installs the addon and configures Google Fonts with Content Security Policy in an Ember project."},"warnings":[{"fix":"Set environment variable GOOGLE_FONTS_API_KEY or use API key in config.","message":"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.","severity":"gotcha","affected_versions":">=2.0"},{"fix":"Update config to use array format: ['Open+Sans:300,400,700'] instead of 'Open+Sans:300,400,700'.","message":"In v2.0.0, the configuration property name changed from 'googleFonts' to 'googleFonts' (same), but the format changed from a string to an array.","severity":"breaking","affected_versions":">=2.0"},{"fix":"Manually add loading='lazy' attribute if asynchronous loading is needed.","message":"The addon does not lazy load fonts as of v2.16.2; fonts are loaded synchronously in head. Future versions may support lazy loading.","severity":"gotcha","affected_versions":"<3.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Add 'font-src': \"'self' fonts.gstatic.com\" to contentSecurityPolicy.","cause":"Missing fonts.gstatic.com in font-src CSP.","error":"Refused to load the font '<URL>' because it violates the following Content Security Policy directive: 'font-src 'self''."},{"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.","cause":"Addon not properly installed or registered.","error":"Error: Could not find module 'ember-cli-google-fonts' imported from 'my-app/components/my-component'"},{"fix":"Change 'googleFonts: \"Open+Sans:300,400,700\"' to 'googleFonts: [\"Open+Sans:300,400,700\"]' in config/environment.js.","cause":"googleFonts config is a string instead of an array.","error":"TypeError: googleFonts.split is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}