|
| 1 | ++++ |
| 2 | +ShowToc = false |
| 3 | +date = 2022-09-06T18:30:00Z |
| 4 | +description = "Italic Fonts for your terminal & Editor" |
| 5 | +tags = ["terminal", "vscode", "font", "config", "tips"] |
| 6 | +title = "Italic Fonts" |
| 7 | +[cover] |
| 8 | +alt = "italic fonts blog post cover" |
| 9 | +image = "/blog/uploads/italic-fonts-blog.png" |
| 10 | + |
| 11 | ++++ |
| 12 | +Making fonts italic in your code editor or your terminal can be hard since there’s not such default visual settings that you can just turn on like to make the fonts bold (only some of them have it). But italic fonts look great and really cool if you have a font that support font ligatures. |
| 13 | + |
| 14 | +## Terminals |
| 15 | + |
| 16 | +Here are some setting to add in your terminal settings to make the fonts go italic. |
| 17 | + |
| 18 | +### Windows Terminal |
| 19 | + |
| 20 | +Open the JSON settings from the settings tab in the terminal |
| 21 | + |
| 22 | + |
| 23 | + |
| 24 | +And add the following settings into that JSON file |
| 25 | + |
| 26 | + "profiles": { |
| 27 | + "list": [ |
| 28 | + { |
| 29 | + "font": { |
| 30 | + "face": "VictorMono NF", |
| 31 | + "weight": "bold", |
| 32 | + "axes": { |
| 33 | + "ital": 1 // this is what does the magic |
| 34 | + } |
| 35 | + }, |
| 36 | + }, |
| 37 | + ... |
| 38 | + ] |
| 39 | + } |
| 40 | + |
| 41 | + |
| 42 | +### Gnome-Terminal |
| 43 | + |
| 44 | +Gnome-Terminal is the default terminal app on most the Linux distributions, to use italic fonts there’s no additional configuration required, you just need to choose the italic font style from your terminal preferences. |
| 45 | + |
| 46 | +To do that go to preferences > profile > text > font. |
| 47 | + |
| 48 | +> One thing to note is that you should download the whole font family of the font that you want and then choose the italic font. The italic font style won’t show up if you don’t download the whole font family. So it’s better to download them all. |
| 49 | +
|
| 50 | +## VS Code |
| 51 | + |
| 52 | +To make fonts italic in `VSCode` irrespective of your theme put the following settings into your `settings.json` |
| 53 | + |
| 54 | + "editor.tokenColorCustomizations": { |
| 55 | + "textMateRules": [ |
| 56 | + { |
| 57 | + "scope": [ |
| 58 | + "comment", |
| 59 | + "entity.name.type.class", // class names |
| 60 | + "keyword", // import, export, return |
| 61 | + "constant", // String, Number, Boolean..., this, super |
| 62 | + "storage.modifier", // static keyword |
| 63 | + "storage.type.class.js" // class keyword |
| 64 | + ], |
| 65 | + "settings": { |
| 66 | + "fontStyle": "italic bold" // comments are italic |
| 67 | + } |
| 68 | + }, |
| 69 | + { |
| 70 | + "scope": [ |
| 71 | + "invalid", |
| 72 | + "keyword.operator", |
| 73 | + "constant.numeric.css", |
| 74 | + "keyword.other.unit.px.css", |
| 75 | + "constant.numeric.decimal.js", |
| 76 | + "constant.numeric.json" |
| 77 | + ], |
| 78 | + "settings": { |
| 79 | + // following will be excluded from italics (VSCode has some defaults for italics) |
| 80 | + "fontStyle": "bold" |
| 81 | + } |
| 82 | + } |
| 83 | + ] |
| 84 | + }, |
| 85 | + |
| 86 | + |
| 87 | +The above settings does make the following things italic |
| 88 | + |
| 89 | +* class names |
| 90 | +* keywords |
| 91 | +* constants |
| 92 | +* memory modifiers and class keyword |
| 93 | + |
| 94 | +Also, it exempts the custom italic style to certain things that VS Code has default italic config for. |
0 commit comments