iOS 26 is able to display web fonts in Lockdown mode, with certain limitations. One of these seems to be an issue with web fonts, with variable font weight, which is the default when grabbing an embed code from Google Fonts:
This works perfectly on the desktop, for all major browsers I’ve tested (Chrome, Safari, Firefox). However I’ve run into an issue, with Nunito font specifically, on the recently released iOS 26, where it would render everything in a single, light font weight, like so:
This is in Lockdown Mode and the embed code looks like this:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">
I experimented a lot with various font- CSS properties, but nothing helped. Then I tried the single font weight embed, instead of variable and got it working ๐ฅณ
The trick is to grab all the embed codes, for all the weights you use on your site and combine them, like so:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;1,200&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital@0;1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,700;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,800;1,800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,900;1,900&display=swap" rel="stylesheet">
Now iOS 26, in Lockdown Mode, renders the custom web font and all the font weights properly:
