How do I load google fonts into my editor's styles?


#1

I’m trying to load a google font into my editor’s styles.less so that I can override the default font:

@import url(http://fonts.googleapis.com/css?family=Anonymous+Pro); 
html, body {
   font-family: 'Anonymous Pro';
}

I’m getting a content security policy error in the editor’s web inspector. Is there anyway to get around that, or perhaps an alternative approach to loading the font into my editor?


Will bitmap fonts eventually be available?
FAQ: Best Practices
Archived FAQs (see FAQ category for all current FAQs)
#2

I was able to just download the font that I was after and drop it into the static folder:

/Applications/Atom.app/Contents/Resources/app/static

and then in my styles.less I added the font-face:

@font-face {
   font-family: dejavu;
   src: url('dejavu/ttf/dejavusansmono.ttf');
}

html, body, .editor {
   font-family: dejavu;
}

#3

So much for that plan. Atom updated to 0.9 and my fonts are gone… I figured that would happen. Are there any folders that are ignored when the updates occur, so that I can permanently store my preferred fonts?


#4

You should probably creates your own package in order to bundle the font with it. That way you make sure that you’ll have a local resource path using the atom:// scheme and there will no risk that an atom update removes it.

Creating Atom packages is really simple, and I believe this kind of thing can be done in less that 5mn:

  1. cmd+shift+p
  2. Search for Package Generator: Generate Package
  3. Press enter and wait for a new Atom window to open
  4. Remove all unrequired files (keymaps, menus, specs) to only keep the stylesheets directory, the main coffeescript file (lib/your-package-name.coffee) and package.json, and remove the activation event from the package.json file.
  5. Remove everything from the main coffeescript file and only leave:
   module.exports = 
     activate: ->
     deactivate: ->
   ```

6. Put your font somewhere in the package directory (in a `resources` directory for instance)
7. Link to your font in the package's stylesheet using the `atom://your-package-name/` scheme, (`atom://your-package-name/resources/your-font.woff` for instance)
8. That's it, your user stylesheet can now access your font :)

The proper documentation for package creation can be found [here](https://atom.io/docs/latest/creating-a-package)

#5

Excellent solution @abe. The only thing that I had to do, in addition to your steps outlined above, was to remove the activationEvents from my package.json, so that the package will auto activate when the app is started.


#6

You’re totally right, I had forgotten this one step ^^


#7

I was inspired by this discussion and built a package that does this for a whole bunch of free fonts that allow embedding and redistribution. So, thanks for that!