CODEWITHSUNDEEP
atom-editor
lars1595
lars1595

Reputation: 925

Atom syntax theme

Is it possible to have custom font or images in your Atom theme? I have put the font file in styles folder of my theme and created CSS but I get a path error:

Failed to load resource: net::ERR_FILE_NOT_FOUND file:///usr/share/atom/resources/app.asar/static/font.ttf

ui-variables.less

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

Upvotes: 0

Views: 427

Answers (2)

tterb
tterb

Reputation: 161

If you're looking to use an alternative font in your syntax or UI-theme Tyler's solution is the easiest approach.
Though, if by "custom images" you're intention is to add a custom file icons to a UI-theme, the implementation is quite a bit more involved. Basically, you'll need an icon font that contains the images you'd like to include and override the default icons used by Atom. You can use an existing font like FontAwesome or you can use something like IcoMoon to create your own custom icon font from SVG's.
As for overriding Atom's default icons, the easiest way of finding the necessary selectors and styling would probably be referencing the implementation of an existing theme. Feel free to check out my UI-theme Atomic Design UI, where I've used an icon font to add custom file icons to the tabs and tree-view. The icon implementation and formatting can be found in the following files:

  • styles/icon-font.less
  • styles/icon-variables.less
  • styles/icons.less

Upvotes: 0

Tyler.z.yang
Tyler.z.yang

Reputation: 2450

According to this discussion and How do I load google fonts into my editor’s styles?.

There are two ways to solve your problem,

You can put your ttf file into your styles folder and update your path to atom://your-package-name/resources/your-font.woff(for instance).

Or Drop the font file into the static folder:

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

Then you can use it in this way, 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;
}

: )

Upvotes: 1

Related Questions