How can I select plural fonts, one for roman and another for italic, in Atom?


#1

I am using Atom with the syntax theme Chester Atom (sorry, I cannot link to the theme due to new user’s limitation) on OS X and attempted to use Source Code Pro and its italic family. Italic is used for syntax highlights which assign italic shape for some keywords in certain languages.

First, I tried the following in ~/.atom/config.cson but this setting failed as shown in the picture. Italic’s weight is rather thicker than that of Source Code Pro ExtraLight Italic.

"*":
  editor:
    fontFamily: "SourceCodePro-ExtraLight,SourceCodePro-ExtraLightIt"

On the other hand, I can assign SourceCodePro-ExtraLight to Latin characters and Source Han Sans ExtraLight to Japanese characters with this code:

"*":
  editor:
    fontFamily: "SourceCodePro-ExtraLight,SourceHanSans-ExtraLight"

What I want to do is use

  1. Source Code Pro ExtraLight for Latin characters rendered in roman shape,
  2. Source Code Pro ExtraLight Italic for Latin characters rendered in italic shape, and
  3. Source Han Sans ExtraLight for Japanese characters. (I suppose this will be easy once the former two designations can be done.)

Is this kind of font selection possible?


#2

What font are italics rendered in when you use SourceCodePro-ExtraLight,SourceHanSans-ExtraLight?


#3

I’m afraid I don’t know what the italic font is. I don’t do anything extra other than using SourceCodePro-ExtraLight,SourceHanSans-ExtraLight however.


#4

I would expect that, without evidence to the contrary, the italic font is Source Code Pro Extra Light italic. I use Source Code Pro specifically for the reason that it supplies a true italic font and have often used the Light version. I have never had to specify the italic version to use explicitly like you’re suggesting. If SourceCodePro-ExtraLight,SourceHanSans-ExtraLight works for Roman and Japanese characters then I think you’re golden.


#5

If so, using other weights (e.g. SourceCodePro-Bold,SourceHanSans-ExtraLight) should thicken italic characters correspondingly. But it doesn’t; only roman characters become bold and italic ones keep the same appearance.


#6

Ah ok, I understand now. I don’t think you can specify the italic font like you’re asking. But you could specify the font weight as part of your theme or styles.less when italics are used.


#7

Adding the following code in styles.less didn’t work. Is there anything wrong? I referred here.

.italic {
    font-style: italic;
    font-weight: 200;
}

#8

That would only work for elements who had the class .italic, which isn’t the case. You would need to track down elements that are italic like .comment and use that CSS on them, almost like you have above:

.comment {
  font-style: italic;
  font-weight: 200;
}

#9

Yes, this is most definitely possible with the use of CSS @font-face! It allows you to create a font family that contains a mix of fonts (and even subsets of fonts). Something like this

@font-face {
  font-family: MyAwesomeFont;
  font-style: normal;
  src: local(SourceCodePro-ExtraLight); /* might need to change this */
}

@font-face {
  font-family: MyAwesomeFont;
  font-style: italic;
  src: local(SourceCodePro-ExtraLightIt); /* might need to change this */
}

@font-face {
  font-family: MyAwesomeFont;
  /* the unicode range for japanese characters
  you might want to add more ranges from
  http://www.rikai.com/library/kanjitables/kanji_codes.unicode.shtml */
  unicode-range: U+4E00 - 9FAF;
  src: local(SourceHanSans-ExtraLight); /* might need to change this */
}

atom-text-editor::shadow {
  font-family: MyAwesomeFont !important;
}

should do the trick, though it may need to be tweaked a bit. See @font-face on MDN for more information on the @font-face rule.


#10

I looked into chester-atom-syntax/styles/base.less and added the followings in styles.less

.punctuation {
  &.definition {
    &.italic {
      font-weight: 200;
      font-style: italic;
    }
  }
}

and

.markup {
  &.italic {
    font-weight: 200;
    font-style: italic;
  }
}

but neither didn’t work…

However, you taught me I was editing incorrect file and which one I should. Thank you.


#11

Your answer looks cool because it seems to be valid even when I change the syntax theme to the one which italicalize differently. However, the solution is a bit difficult for me (actually, I’m not familiar with CSS/LESS), so I’ll visit the link and study what you do with the code later.


#12

Try to copy it into your styles.less, it might work just out of the box :smile: Otherwise I would start with changing the font names in src: local(...). And yes, it’s valid for every syntax theme!


#13

Reading about @font-face, copying to styles.less and reloading the window with ctrl-alt-cmd-L, but italic’s weight doesn’t change. Should I also change anywhere else?


#14

How about if you add the following? It should force chrome to render the ExtraLight font even though it requests a bold font. You can try to play around with the font-weight value.

@font-face {
  font-family: MyAwesomeFont;
  font-style: italic;
  font-weight: 600;
  src: local(SourceCodePro-ExtraLightIt);
}

#15

That addition didn’t work neither :frowning:

For further information, this is the entire content of my styles.less.

/*
 * Your Stylesheet
 *
 * This stylesheet is loaded when Atom starts up and is reloaded automatically
 * when it is changed.
 *
 * If you are unfamiliar with LESS, you can read more about it here:
 * http://www.lesscss.org
 */

 .tree-view {
    
}
    
.tree-view-resizer {
    min-width: 200px;
}
    
// style the background and foreground colors on the atom-text-editor-element
// itself
atom-text-editor {
    
}
    
@font-face {
    font-family: MyAwesomeFont;
    font-style: normal;
    src: local(SourceCodePro-ExtraLight); /* might need to change this */
}
    
@font-face {
    font-family: MyAwesomeFont;
    font-style: italic;
    src: local(SourceCodePro-ExtraLightIt); /* might need to change this */
}
    
@font-face {
    font-family: MyAwesomeFont;
    /* the unicode range for japanese characters
    you might want to add more ranges from
    http://www.rikai.com/library/kanjitables/kanji_codes.unicode.shtml */
    unicode-range: U+3000 - 9FAF;
    src: local(SourceHanSans-ExtraLight); /* might need to change this */
}
    
atom-text-editor::shadow {
    font-family: MyAwesomeFont !important;
}
    
// To style other content in the text editor's shadow DOM, use the ::shadow
// expression
atom-text-editor::shadow .cursor {
    
}
    
// transparent non-active pane
atom-workspace-axis {
    .pane {
        opacity: 0.5;
        &.active {
            opacity: 1.0;
        }
    }
}
    
// Styles for the markdown preview.
@font-family: "Helvetica Neue", Hiragino Kaku Gothic ProN W3, sans-serif;
.markdown-preview{
    font-family: @font-family;
//  letter-spacing: 0.08em;
    
    h1, h2, h3, h4, h5, h6{
        font-family: @font-family;
    }
    
    h1{
        border-bottom: 2px solid #ddd;
        margin: 10px 0 25px 0;
    }
    
    h2{
//      border-bottom: 1px dashed #ddd;
        margin: 50px 0 25px 0;
        padding-bottom: 10px;
    }
    
    h3,h4,h5,h6{
        margin: 40px 0 25px 0;
    }
    
    p{
        margin: 25px 0;
    }
    
    blockquote{
        margin: 25px 0;
        padding-left: 20px;
        border-left: 4px solid #ccc;
        font-style: italic;
        font-size: inherit;
        line-height: 1.5;
        p{font-size:inherit}
    }
}

#16

Oh wait, I made a mistake. I think you can’t apply styles to a ::shadow element, so try

atom-text-editor::shadow * {
  font-family: MyAwesomeFont !important;
}

#17

Thank you, that surely works! However, other problems occurred.

  1. As shown in the picture, the normal font doesn’t look like Source Code Pro ExtraLight; it isn’t mono-spaced.

  2. The tab length in not what I want although it is set to 4 in config.cson.

  3. I added the following lines to use Source Code Pro Regular (Italic) for bold (bold italic) highlight, but they are invalid.

@font-face {
  font-family: MyAwesomeFont;
  font-style: normal;
  font-weight: bold;
  src: local(SourceCodePro-Regular); /* might need to change this */
}

@font-face {
  font-family: MyAwesomeFont;
  font-style: italic;
  font-weight: bold;
  src: local(SourceCodePro-It); /* might need to change this */
}

The first two issues are settled if designation for Japanese characters are deleted, which is unfavorable to Japanese users.

@font-face {
  font-family: MyAwesomeFont;
  /* the unicode range for japanese characters
  you might want to add more ranges from
  http://www.rikai.com/library/kanjitables/kanji_codes.unicode.shtml */
  unicode-range: U+3000 - 9FAF;
  src: local(SourceHanSans-ExtraLight); /* might need to change this */
}

Where do I make mistakes?


#18

If I change the font-family name for Japanese characters (e.g. MyAwesomeFontJ) and use both MyAwesomeFont and MyAwesomeFontJ, problems 1. and 2. are solved.

This method couldn’t be applied to problems 3., though.


#19

Hmmm… looks good to me. Does it matter if you use font-weight: 600 (or maybe 500 or 700) instead of font-weight: bold?


#20

The property and its value font-weight: 500; worked as I intended although I still don’t know why assigning font-weight with adjectives such as bold doesn’t go well lol. Anyway thank you for your help!

Would you mind if I translate your solution into Japanese and introduce this type of font selection with some modification to Japanese Atom users elsewhere? I will, of course, indicate this thread as a source.