Omarchy out of the box looks very good and teamed up with my recommended hi-dpi monitor showing at least 218ppi fonts are incredibly sharp. However as a Mac switcher they aren’t quite right - meaning I’m used to seeing system fonts be SF (the default Apple font) and whilst one day it won’t quite bother me that they aren’t there - for now I want to see web sites that are programmed to use -apple-system or -system-ui to show the SF font.

Doing this in Omarchy (or I guess any flavor or modern linux) is pretty straightforward but I wanted to lay it out here so its easy.

Step 1 - Copy the SF Fonts from your Mac to a USB drive (my ones were in /Library/Fonts on my Mac)

Step 2 - create a folder in Omarchy called /.local/share/fonts/apple and copy the fonts into that folder.

**Step 3 **- create a file ~/.config/fontconfig/fonts.conf and put this into it:

<?xml version='1.0'?>
<!DOCTYPE fontconfig SYSTEM 'urn:fontconfig:fonts.dtd'>
<fontconfig>

  <!-- Modern generic that `-apple-system` maps to in Chrome -->
  <alias>
    <family>system-ui</family>
    <prefer>
      <family>SF Pro Display</family><!-- big sizes -->
      <family>SF Pro Text</family>   <!-- ≤20 px, optional -->
    </prefer>
  </alias>

  <!-- Older WebKit/Blink literals that still appear in CSS stacks -->
  <match target="pattern">
    <test qual="any" name="family"><string>BlinkMacSystemFont</string></test>
    <edit name="family" mode="assign" binding="same">
      <string>SF Pro Text</string>
    </edit>
  </match>

  <match target="pattern">
    <test qual="any" name="family"><string>-apple-system</string></test>
    <edit name="family" mode="assign" binding="same">
      <string>SF Pro Text</string>
    </edit>
  </match>

  <!-- Font rendering settings for macOS-like appearance -->
  <match target="pattern">
    <edit name="antialias" mode="assign"><bool>true</bool></edit>
    <edit name="hinting" mode="assign"><bool>true</bool></edit>
    <edit name="hintstyle" mode="assign"><const>hintslight</const></edit>
    <edit name="lcdfilter" mode="assign"><const>lcddefault</const></edit>
    <edit name="rgba" mode="assign"><const>rgb</const></edit>
    <edit name="stem-darkening" mode="assign"><bool>true</bool></edit>
    <edit name="stemdarkening" mode="assign"><bool>true</bool></edit>
  </match>

</fontconfig>

Step 4 - run fc-cache -fv (this adds the new fonts to your font cache)

Step 5 - reboot

When your system boots back up you should get some familiar font rendering on most popular websites.

Thanks to Drew Hamlett and this tweet for help in getting this working.