Packing Custom Fonts for NixOS

Ali Oğuzhan Yıldız — Sun, 04 Aug 2024 18:04:00 +0000

Originally published at yildiz.dev on April 5, 2024.

I have been using NixOS for a long time. And I am very happy with it. It is very stable and easy to configure.

With NixOS, installing and configuring famous and open-source fonts is already very straightforward. Here is my font configuration in configuration.nix:

fonts = {
    fontDir.enable = true;
    enableGhostscriptFonts = true;
    packages = with pkgs; [
      cantarell-fonts
      hack-font
      inter
      jetbrains-mono
      liberation_ttf
      monaspace
      noto-fonts
      ubuntu_font_family
      (nerdfonts.override { fonts = [ "FiraCode" "DroidSansMono" "JetBrainsMono" ]; })
    ];
  };

Things get a little bit complicated when you want to use a custom or any commercial font that is not available in Nix packages. I am using Berkeley Mono. It is a great font for both the editor and the terminal. And here is how I packed it for NixOS:

Adding the Font to the NixOS Configuration

We need to add the font to our NixOS configuration so it will be installed and available after the build.

There are a few ways to do this. You can zip your font and add it to your config repository. Or you can serve the font files from
a web server with some credentials. Since my config repo is not public, I am using the first option. Here is how I did it:

First, create a derivation for our font:

# make a  derivation for berkeley-mono font installation
{ pkgs }:

pkgs.stdenv.mkDerivation {
  pname = "berkeley-mono-typeface";
  version = "1.009";

  src = ../../assets/berkeley-mono.zip;

  unpackPhase = ''
    runHook preUnpack
    ${pkgs.unzip}/bin/unzip $src

    runHook postUnpack
  '';

  installPhase = ''
    runHook preInstall

    install -Dm644 berkeley-mono-patched/*.ttf -t $out/share/fonts/truetype

    runHook postInstall
  '';
}

Note that src part. It points to the zip file, which I put under the assets directory in my config repository.

I save this file as berkeley-mono-typeface.nix under the packages directory alongside my other custom packages.

Now we need to access this package from our configuration.nix file:

let
  berkeley-mono-typeface = pkgs.callPackage ./packages/berkeley-mono-typeface { inherit pkgs };
in
# other configurations
# ....

fonts = {
    fontDir.enable = true;
    enableGhostscriptFonts = true;
    packages = with pkgs; [
      cantarell-fonts
      hack-font
      inter
      jetbrains-mono
      liberation_ttf
      monaspace
      noto-fonts
      ubuntu_font_family
      (nerdfonts.override { fonts = [ "FiraCode" "DroidSansMono" "JetBrainsMono" ]; })
      berkeley-mono-typeface # It is here!
    ];
  };

And that's it. Now rebuild your NixOS and you should be able to use your font.

Bonus: Patching the Font

Specifically, Berkeley Mono provides very few glyphs. To have all those fancy icons and symbols used in your editors and terminal, we
need to patch the font. Thankfully, it is very easy to patch the font with Nerd Font Patcher:

docker run --rm -v ./berkeley-mono:/in:Z -v ./berkeley-mono-patched:/out:Z nerdfonts/patcher --mono --adjust-line-height --progressbars --complete

Assuming your berkeley-mono directory, which contains the TTF and OTF folders, this command will patch the fonts
and put them into the berkeley-mono-patched directory.

If you also want to patch your font before using it on your system, you can tweak the above command and use it.

With the above patch command, our font will be available with the name BerkeleyMono Nerd Font Mono. So you need to use this name when you want to use it in your editor or terminal. If you remove the --mono flag, then it will be BerkeleyMono Nerd Font. You get the idea.

Enjoy your new font!

React Typescript Library Template

Ali Oğuzhan Yıldız — Sat, 29 Feb 2020 21:18:40 +0000

Hey dev.to,

I just published a template repository at Github to start a React library with Typescript. Any kind of feedback and PR are welcome! Thanks.

https://github.com/alioguzhan/react-typescript-library

React EdiText - Inline Editable Text Component

Ali Oğuzhan Yıldız — Sat, 22 Sep 2018 19:13:02 +0000

I just published my first open source library for React. EdiText is a React component provides inline editing for texts.

You can see examples and usage on the Github page. Any kind of feedback is welcome. Here its Github Page:

https://alioguzhan.github.io/react-editext/

Forem: Ali Oğuzhan Yıldız

Packing Custom Fonts for NixOS

Adding the Font to the NixOS Configuration

Bonus: Patching the Font

React Typescript Library Template

React EdiText - Inline Editable Text Component