A meteor streaking through the sky above Chelyabinsk in 2013.
This morning I started my day by reading tutorials on my computer. I read an article that made me look through my recent prototype files for my Links and Buttons project.
I had forgotten about the Links and Buttons project. I did lots of research. I want to write about links and buttons.
In March I delved into a deep dive into my WordPress CSS code and typography. My work on my code base required intense research and consistent concentration. The typography refactor project took way longer than expected.
Long projects affect my connection to other projects. I’ve lost the thread of other work that I was doing. Now I need to pick up the threads of previous projects.
I’ve written many articles recently. I had a nagging feeling that I wrote an article that I lost, or that I wanted to write.
A description I found embedded into the Links and Buttons prototype is the kernel of my article.
Links and buttons may look the same but they are different. Buttons connect to JavaScript functions. Links go somewhere.
A key interest I have for links and buttons has to do with CSS attributes and selectors. I used data attributes in my prototype to make variations of the links and buttons.
I opened more tutorials to study. I also dug into Aria a little more. I am thinking of revisiting the project to add aria labels for the links. From what I have read a simple “ID” is enough of a label for aria and CSS selectors.
I discovered many other prototype projects in my 2024 Prototype folder. The other prototypes have to do with color, scrolling behavior, and animation. I plan to combine elements of these projects to redesign parts of my website.
These prototypes are the components that I use to build websites for clients.
I am working on creating a presentation to teach how to set up an Eleventy project. I was testing the course to decide how to include styles. I need to write a purpose statement to introduce the presentation. My goal is to keep the presentation to 40 minutes.
Another project is a HTML portfolio that I will print as a PDF. I intend to use it for self-promotion and project search. I have many work samples to add.
At the end of the March typography refactor project I published my article. There are two more articles to edit and publish. I want to get these done and out. I am eager to pick up work on my other projects. I am putting myself out to the world looking for paid projects where I can offer my design expertise.
Variable Fonts – The future of typography has already begun.
Last night I completed a complex revision of the typography for my WordPress Blog. Today I posted the new CSS and assets to my server. It worked. Beautiful. I edited an article and published it. Publishing is always a victory.
My typographical odyssey begins
Revising my stylesheet took over a month. The project started when I wanted to transfer an article from my Eleventy blog to my WordPress blog. A slight typographical oddity caused me to discover that my source fonts had changed.
I used fonts hosted on Google Fonts. I discovered that the static Open Sans Google font has changed to be a variable font. I needed to update my fonts.
I decided to download the new variable font versions and to host them on my local server.
One reason to host fonts locally is to comply with GDPR privacy laws. GDPR laws protect European users from tracking. Marketers and hackers can track data from fonts loaded on Google’s servers.
I’ve also found that connecting to external assets can cause problems.
Recently I looked at the code of an old client’s website. I found that years ago I had connected to a CDN for Twitter Bootstrap version 2.5. Twitter Bootstrap removed the code from the CDN. That broke my client’s website.
So I want all assets to be local to protect any website I am working on from any unanticipated outside changes.
My objectives were to:
A. Convert to variable fonts
B. Host fonts locally
Easypeasy. Not so easy. I proceeded to go on an odyssey of many rabbit-holes and gotchas.
Rabbit hole – Getting variable fonts
Ubuntu Variable Font
Working through typography tutorials I found rumors of an Ubuntu variable font. A developer test demonstrated an Ubuntu variable font example. I downloaded the font from the tutorial but I couldn’t get it to work. I didn’t know the right name to use to link to the font.
Research showed that Ubuntu is a framework for Linux. The Ubuntu framework homepage includes a page demonstrating the variable Ubuntu font.
I looked at the Ubuntu page source code and found links to a CDN host. I downloaded the fonts from the CDN. Then I found proper naming for Ubuntu variable fonts on Github.
I was able to download the font, copy Ubuntu’s font naming, and successfully load and test the font. Great.
Meanwhile I had many other details to tackle. I read more tutorials about linking fonts to websites. Previously I linked to Google fonts in the head section of my HTML page. To host locally I need to use @font-face declarations at the top of my CSS.
Rabbit hole – System fonts and font fallbacks
A popular new typography method is to load system fonts as a backup. The idea of system-ui fonts is to link to fonts that are on any system. However, system fonts do not reflect the font styles I use. I added a list of system fonts to a reset at the top of my cascade. System fonts are generic and dull. I hope I won’t need them.
An older method of font fallbacks is to have a “font-stack” of fonts to load if the primary fonts are unavailable. The purpose of choosing fallback fonts is that they will look similar to my font styles.
I selected my font-stack based on what fonts are on computers, based on current software. My old 2016 font stack was out of date. I selected a new series of fonts to match the style of my headline font.
My font-stack list starts with a custom property. Then I include my font in case the custom property does not work. Finally I include a list of similar fonts that potentially are on the user’s computers. If none of that works the system-ui fonts will load from the reset.
Rabbit hole – Code debt and synchronized code bases
Updating fonts required revisions to the stylesheet. My WordPress CSS matches my website more or less. I converted old SASS values to custom properties and removed old proprietary declarations.
Rabbit hole – Connecting fonts in WordPress
I tried to load the local font paths into my WordPress functions php. I failed. Most WordPress tutorials only show how to link to Google fonts. Few show a clear link to loading local fonts. WordPress tutorials are junk to read. Also, WordPress is changing into a creepy framework. It is not a developer friendly space anymore. I decided to load the new fonts through CSS.
Rabbit hole – Google Gotcha
While working I discovered that the Open Sans fonts were not loading. Google provides the ability to download variable fonts but the fonts are in .ttf format. Variable fonts need to be in .woff2 format to work. Following a tip from Henry Desroches, I found an application on Github to convert fonts. I installed it on my computer and converted the Open Sans font via the terminal.
Now the variable fonts work as expected. I’ve made a major update to both my WordPress and my website.
Concept, design and creative development.
Build a core identity and message tailored to your target audience.
Craig Webb Art provides all aspects of New Business Communications Development including project management, creative development, copywriting and graphic design.
