Mike Zornek

How I Got Rid of My Google-Hosted Web Fonts

mike@mikezornek.com (Mike Zornek) — Tue, 15 Apr 2025 08:19:13 -0400

Over the last few weeks, I’ve been doing some infrastructure updates to the website, and one of those changes was to drop the use of Google’s linked web fonts and instead host custom fonts from my own server in the spirit of improving the privacy of my site visitors.

Here is how I did it and some of the problems I ran into.

Picking your font

The first custom font I had in mind was Ubuntu, a bold sans-serif font that I like for my name in the header. You can see samples of this on Google’s site, but to download it, I take advantage of the google-webfont-helper site, which lets me quickly customize the exact styles I am interested in using and offers me a list of various CSS methods of use. I use the more modern CSS approach, as seen in the following snippet.

/* ubuntu-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/ubuntu-v20-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ubuntu-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/ubuntu-v20-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

Source: assets/css/main.css

Aside: I still need to add a proper license display for this font usage. That is still forthcoming.

Using your font with Tailwind

The other notable infrastructure update was to make it so I could use Tailwind within my Hugo templates. To reference my font, I use the following Tailwind utility class:

<h1 class="font-[Ubuntu] text-6xl font-bold">{{ site.Title }}</h1>

If you want to use a font more broadly, I’d recommend editing Tailwind configuration so you can express fonts with better abstractions at call sites, but for this one-off header, this is fine.

Avoiding Flash of Unstyled Content (FOUC)

After deploying my new self-hosted fonts, I observed flashes of unstyled content. Specifically, Safari would display the header copy in a serif font and then swap it into Ubuntu. Both Safari and Firefox would flash the new header background texture image as I clicked from page to page.

I did a little reading and landed on the following solution, which has me use <link> elements included in my <head> to help hint to the web rendering systems more early in the drawing process that it will need these resources before the first paint.

<link
  rel="preload"
  href="/fonts/ubuntu-v20-latin-700.woff2"
  as="font"
  type="font/woff2"
  crossorigin
>
<link
  rel="preload"
  href="/fonts/ubuntu-v20-latin-regular.woff2"
  as="font"
  type="font/woff2"
  crossorigin
>
<link rel="preload" href="/images/dark-mosaic.png" as="image">

I think these are working well.

The font preload explicitly needs crossorigin for CORS things, but the image did not, which I find interesting.

I’ll probably be doing more with my fonts and the overall design of the site in the coming weeks, but this was a good nugget of progress.

Resources

If you want to avoid hosting a font, consider limiting your options to more likely supported options from the OS. Dreamhost has a blog post outlining some good choices for each family style.
If you want to learn more about fonts (and basic design), I highly recommend The Non-Designer’s Design Book by Robin P. Williams. Its teachings stand the test of time.
I mentioned background textures, and if you are looking for some, check out this helpful gallery.

What is Local-first Software?

mike@mikezornek.com (Mike Zornek) — Mon, 03 Feb 2025 09:11:28 -0500

Local-first software is a term that came out of a research lab called Ink & Switch back in April 2019. In a wonderful paper, they explored some ideas that resonated with me.

In today’s post, I want to talk a bit about the problems local-first software solves and explore an abbreviated definition of how to identify local-first software. I’ll close with some resources to learn more and a quick review of my next side project.

Let’s start by talking about the problem.

The Problem

Over the last twenty years, the balance of power between software users and software providers has become incredibly one-sided.

Modern companies, through the software they provide, have tremendous leverage against their users. This power shift comes primarily through ubiquitous centralized data. The outcome of this is that the user is disenfranchised through loss of data sovereignty, privacy, security, and long-term software availability.

Why did users give up this power so easily? For collaboration. Collaboration is the killer feature of the modern web, and frankly, it was much easier to build when we agreed to centralize the data.

I can only speak for myself, but I don’t think we as a whole really knew what we were building in those early days. We used language like “connecting people,” and it was never about gatekeeping. But as collaboration and social networking features started to mature, we found ourselves in a world that was off balance.

The Solution

Local-first software aims to describe an approach to software that better empowers users. From the paper:

We believe that data ownership and real-time collaboration are not at odds with each other. It is possible to create software that has all the advantages of cloud apps, while also allowing you to retain full ownership of the data, documents and files you create.

We call this type of software local-first software, since it prioritizes the use of local storage (the disk built into your computer) and local networks (such as your home WiFi) over servers in remote datacenters.

Later in a conference talk, Martin Kleppmann provided a more succinct definition:

In local-first software, the availability of another computer should never prevent you from working.

He expanded:

If it’s local-only, it’s not local first.
(Local-first implies multiplayer, or at least multi-device among a user’s devices)

If it doesn’t work with the wifi off, it’s not local-first.
(Local-first implies offline support.)

If it doesn’t work when the app developer goes out of business and shuts down their servers, it’s not local-first.

For more, I highly recommend reading the original paper and watching the recent conference talk.

The Technologies That Seeds this Dream

If you have ever been involved in data distribution, data integrity, syncing, merging, resolving conflicts, or any of the other nightmares that surround this story, you might read the definition of local-first and walk away thinking it’s a pipe dream. Yes, this is a very challenging technical problem, but exciting advancements exist in Conflict-free Replicated Data Types (CRDTs).

Wikipedia summarizes:

In distributed computing, a conflict-free replicated data type (CRDT) is a data structure that is replicated across multiple computers in a network, with the following features:

The application can update any replica independently, concurrently and without coordinating with other replicas.

An algorithm (itself part of the data type) automatically resolves any inconsistencies that might occur.

Although replicas may have different state at any particular point in time, they are guaranteed to eventually converge.

Over the last decade, research and development on these algorithms have matured, making real-world production deployments possible.

Multiple implementations of these algorithms exist, with Automerge being a popular starting point.

If you want to learn more about Conflict-free Replicated Data Types I recommend watching CRDTs and the Quest for Distributed Consistency and the follow up CRDTs: The Hard Parts

To be clear, local-first does not require specifically CRDTs, nor does using CRDTs make your software local-first.

Why this Excites Me

In my senior years, I have become very cynical and negative about the technical industry I participate in. Overall, I question whether all of this has made our lives better. When I compare the positive and the negative, I have trouble finding balance.

I am also a realist, understanding that I am a grain of sand on the beach of civilization. I try to focus on the things I can positively impact and not get overwhelmed by the things outside my control.

Thinking about my work, I align with the problems and solutions local-first software promotes. When I consider how I want to spend my day coding, do I want to code yet another centralized system some private equity firm can crunch and mold to its will and profits above all others? Or do I want to contribute, even a small slice, to the creation of long-lived software that empowers users?

What’s Next?

With work on Flick slowing down, I’d like to define my next side project, and I think it will be a local-first research project. I want to define a time box and outline experiments and prototypes to test out some of these ideas and see how they can work in practice. In the end, I hope to have a software deliverable of some value and a series of blog posts explaining what I’ve learned along the way. I’m still shaping what this will be, but I thought I’d start the journey with a definition of local-first.

Resources

Hostname-based Privacy Tools Need to Evolve For Websocket Concerns

mike@mikezornek.com (Mike Zornek) — Thu, 20 May 2021 20:30:00 -0400

I’m a privacy advocate. I use Firefox as my main browser. I install adblock browser extensions. I block ads from within my network router. Most of these privacy tools rely on the fact most ads and tracking happen through JavaScripts which are embedded alongside the websites we are visiting and send tracking data to a third party hostname. We know these hostnames are suspect and so we block the connections outright.

But what if the ads and tracking were to flow through the same hostname of the original website? What if the ads and tracking were woven though the same websocket connection that the main site ran through? How would we be able to block that?

Persistent websocket connections are the backbone for anything on the modern web that is collaborative or realtime. Phoenix LiveView is a library I personally enjoy using to build websocket-powered apps. A similar library called Turbo is also out there for Rails.

Having knowledge of how websockets work, how JavaScript tracking works and how privacy tools work – I have a growing concern that as we see more prevalent hostname-based privacy tools get traction amongst the casual web userbase the ads and tracking software is likely to evolve and may move into the websocket space. If it does I’m concerned it will be very difficult to separate the traffic of the main website one is trying to engage with and the ads and tracking bits that flow inside the same pipe to the same host.

I don’t have much to else to add. I have no answers, just concerns. Is anyone else working on this right now?

Is WebKit Sabotaging the Future of the Open Web?

mike@mikezornek.com (Mike Zornek) — Mon, 06 Jul 2020 17:10:19 -0400

This didn’t get much press at the time, but during WWDC the WebKit team listed a bunch of web technologies they will apparently not be implementing in the name of privacy.

Fingerprinting involves measuring the uniqueness of static device configuration (e.g. built-in hardware), dynamic device or browser configuration (e.g. user settings or installed peripherals), and user browsing data (e.g. checking which sites the user is logged in to, so-called login fingerprinting).

WebKit’s first line of defense against fingerprinting is to not implement web features which increase fingerprintability and offer no safe way to protect the user. Here are some examples of features we have decided to not implement in part due to fingerprinting concerns:

Web Bluetooth

Web MIDI API

Magnetometer API

Web NFC API

Device Memory API

Network Information API

Battery Status API

Ambient Light Sensor

HDCP Policy Check extension for EME

Proximity Sensor

WebHID

Serial API

Web USB

Geolocation Sensor (background geolocation)

User Idle Detection

Just to be clear, I am a privacy advocate. I use DuckDuckGo. I use Firefox. I block ads. I encrypt my DNS lookups. I’m building a privacy-focused tool for meetups. And with all that said, this worries me.

Right now, many mobile developers would argue that for a rich user experience you need to build a native app and I would agree, at least I would as of today.

But if I’m reading the tea leaves right, and history is a model to follow, what requires “native device” code today will be possible in the web browser of the future. WebAssembly shows great early promise in providing rich cross-platform code opportunities. If you are a 1Password user like me, you are probably already enjoying some WebAssembly today.

However, to build rich user experiences on a mobile device using WebAssembly or inside a normal web app requires access to the sensors and systems of that device. With this collective blocking of access (along with the lack of side loading options on iOS and the ban of non-WebKit rendering in App Store apps) Apple has positioned their own native and financial interests over the favor of an open web.

Why can’t the WebKit developer energy be spent on building these great new APIs and connect them with user empowering privacy tools. A great example of what I mean is website location tracking. If a website wants access you your location (for say driving directions) you can grant it access. I don’t understand why a similar approach could not be applied for things like Web Bluetooth access or Proximity sensor access.

I applaud many of the privacy decisions the WebKit team has made over the past couple of years, but this one feels wrong.

When I was learning to program in the late 90s we had another big platform vendor who sabotaged the web browser market for their own interests and I do not want a repeat.

Putting Zoom in Quarantine

mike@mikezornek.com (Mike Zornek) — Thu, 09 Apr 2020 16:03:22 -0400

I’ve already blogged about my interest in finding a Zoom alternative for my own groups and meetings but sadly it’s not a platform I can completely shun since I have personal connections that still use it heavily.

First a small update on my alternatives…

I had high hopes for Jitsi. Being open source was a huge plus for me, but sadly when we tried it out at my Elixir meeting, we ran into multiple technical problems.

At said meeting we eventually jumped to Whereby. Whereby feels like it’s more suited for small groups, and our group is small so we were able to use it without issue.

In addition to the technical success, the user experience of Whereby was also enjoyed by the attendees. It was fully featured and worked well in our personal web browser of choice. Today while doing some more research I was also happy to see Whereby’s privacy statement was written in plain English and seemed reasonable.

Moving forward, I think I’ll be leaning on Whereby when I have control.

For my Zoom-choosing communities, I first tried just using the browser version with my copy of Firefox, but that did not go over well. Zoom web wants Chrome and once again, I would prefer not to install Chrome for privacy reasons.

I then tried a Docker containerized version of Zoom but quickly discovered it expects a Linux host and does not work with Mac OS.

In lieu of Chrome I finally installed Iridium Browser, which is a open source project that takes the open source base of Chrome, Chromium, and removes all of the Google phone home and related features. Today I was able to use Iridium to participate in a Zoom call with moderate success. I still had to sign in to a Zoom account which is not very comforting, and the Zoom web UI is not a 1:1 match to its desktop cousin (one feature it lacks is gallery mode, which I like to use) – but it did work.

Despite some improvements, Zoom security issues continue to come out on regular basis. I hope in time I can drop it entirely, but for now I feel like limiting my interactions with a mostly isolated Iridium Browser will do.

If you are in control of a Zoom meeting, please consider researching you own replacement. Hopefully this info will help towards that end.

Zoom / Google Hangout Alternatives

mike@mikezornek.com (Mike Zornek) — Fri, 27 Mar 2020 14:02:41 -0400

With the need to do more video conferences and meetings many are turning to Zoom and Google Hangouts. Technically I’ve always thought Google Hangouts was pretty mediocre and Zoom, while a better user experience has shown time and time again not to be trustworthy software.

One item of homework for myself is to investigate alternatives for my own meetup and other projects that better respect the privacy of users. So far some recommendations I’ve gotten from friends:

Jitsi - Jitsi is a set of open-source projects that allows you to easily build and deploy secure videoconferencing solutions. At the heart of Jitsi are Jitsi Videobridge and Jitsi Meet, which let you have conferences on the internet, while other projects in the community enable other features such as audio, dial-in, recording, and simulcasting.
Whereby - Whereby is a flexible tool providing you with video meetings in the browser – no downloads & no logins for guests
Nextcloud Talk - Screensharing, online meetings & web conferencing without data leaks.

If you have anymore recommendations please let me know. I’ll share my notes when I’m done but wanted to get this out now so others can tests the waters as well.

Hello Firefox, Goodbye Chrome

mike@mikezornek.com (Mike Zornek) — Mon, 08 Oct 2018 01:46:34 +0000

A few weeks ago I said to myself, enough was enough and dropped the Chrome web browser.

If you aren’t actively following the web development world it’s easy to miss, but Google and Chrome have really been hostile toward the open web over the last few years. A few examples:

In 2016 Google introduced Accelerated Mobile Pages. From its wikipedia page:

AMP has been widely criticized by many in the tech industry for being an attempt by Google to exert its dominance on the Web by dictating how websites are built and monetized, and that “AMP is Google’s attempt to lock publishers into its ecosystem”. AMP has also been linked to Google’s attempt to deprecate URLs so that users will not be able to immediately see whether they are viewing a webpage on the open Web or an AMP page that is hosted on Google’s servers. AMP has been described as being “poisonous to the underlying concept of an open internet.”

In Chrome 68 they began to deprecate HTTP and now list HTTP sites as insecure.

In Chrome 69 they added a behavior that strips the www subdomain from the URL bar. (Try visiting www.mikezornek.com and it becomes mikezornek.com. This may feel like a small thing for users but as a developer its a firm violation for how the web URL works.

Just this weekend I read a story of some more shenanigans:

Matthew Green:

A few weeks ago Google shipped an update to Chrome that fundamentally changes the sign-in experience. From now on, every time you log into a Google property (for example, Gmail), Chrome will automatically sign the browser into your Google account for you. It’ll do this without asking, or even explicitly notifying you.

Paul Frazee:

There’s a reason people are reacting to Chrome like this. This isn’t an overreaction over one single event. It’s a delayed reaction to a pattern of bad behavior.

It’s contextualized by the very messed-up power dynamic between Google and the open Web.

Google’s influence over the web through its search was already over the line in many ways but to see its once celebrated browser go down this road is depressing.

Actions speak and Firefox is treating me well. I now use it across my computers and devices, from MacOS to iOS and even my Windows gaming tower. DuckDuckGo is my default search engine (and has been for like a year now) and works well too. It feels good to be using products from people who share my interests to heart.

Staying Secure on OS X with a Few Unsigned Apps

mike@mikezornek.com (Mike Zornek) — Mon, 19 Oct 2015 22:10:33 +0000

I could get into some real heavy talk regarding Apple’s policies about installing software outside their stores (and maybe I will someday) but for now let us all be thankful that not all Mac software must come to us through Cupertino. Let us also be thankful for Gatekeeper, a nice compromise Apple offers.

With Gatekeeper, Apple allows people to distribute Mac software outside the store but requires it be signed with an identity registered with Apple. The general idea being if a developer gets marked as distributing malware Apple can blacklist them so as to not effect users in the future. I’m not aware of any honest developer being wrongfully blacklisted and my general understanding is that the program is working well with known limitations.

OS X ships with a nice safe default via Settings > Security,

“Allow apps downloaded from:” set to “Mac App Store and identified developers”. Unfortunately even though Gatekeeper has been around since 10.7 there are some apps that are not signed nor will never ever be signed that you want to run. Most users will sadly turn off the Gatekeeper check entirely at this point, leaving their system vulnerable. Below I’ll walk you though how to allow a unsigned app to run while leaving the security setting as-is.

By default OS X ships with the setting set to “Mac App Store and identified developers”.

When you try to open an unsigned app you’ll get a prompt like this:

Click OK and then go back to System Preferences and you might notice the pane has changed:

Now you can choose to “Open Anyway” for the last app blocked by Gatekeeper. Go back and try to launch the app again. You’ll get a final prompt asking if you sure, and upon clicking Open you’ll be able to run you unsigned app while still maintaining the default security setting.

While a little tedious jumping back and fourth for the initial approval, I’d much rather do this and leave Gatekeeper on than to run without the identity check. I highly recommend you do so too, and if you can, maybe a friendly email to your app developer asking him to sign his app.

UPDATE: Was informed by @boredzo and @ abrahamvegh that there is a shortcut to this flow if you anticipate the app requiring approval. For example, if you download an app you know will need this special exception you can control-click it and choose Open from the context menu. Doing so will cause a similar prompt that will whitelist the non-signed app and allow you to run it without turning off Gatekeeper. Thanks for the extra info guys!