{"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,"search_vec":"'2':46 '4.5':40 '6':41 '7':43 'add':12 'addon':8,68 'applic':18 'automat':54 'avoid':30 'block':63 'cli':3 'configur':51 'content':26,55 'content-for':25 'css':33 'declar':22 'differenti':49 'ember':2,7,17,36,45,67 'ember-addon':66 'ember-cli-google-font':1 'environment.js':53 'file':34 'follow':44 'font':5,14,21,71,72 'googl':4,13,70 'google-font':69 'head':28 'hook':29 'inclus':31 'inject':20 'javascript':65 'lazi':60 'lazili':11 'load':61 'minim':50 'node':39 'polici':57 'project':37 'render':64 'secur':56 'support':35 'target':38 'updat':58 'v2.16.2':9 'version':48 'via':52 'without':62 'x':47","created_at":"2026-04-25T07:37:32.225690+00:00","updated_at":"2026-04-25T07:37:32.225690+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/damiencaselli/ember-cli-google-fonts","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/ember-cli-google-fonts","openapi_spec":null,"status_page":null,"smithery":null,"categories":["gcp"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-24","install_tag":null}}