Removing Google Fonts & Other 3rd Parties

  2-minute read   hugo • optimizations • googlefonts

Next on the list is to remove as many 3rd Party dependencies as I can. This change was a really quick one and thus a really short post.

But, it knocks two more things off my list

  • Removing unused CSS
  • Minifying/Removing FontAwesome
  • Minimizing requests to 3rd parties (fonts, metrics, etc)
  • Remove Google Fonts while still looking appealing
  • Minimizing use of JavaScript
  • Converting Images to WebP or some other optimized formats

Removal of 3rd Party Scripts

The easiest way was just to go around looking for link elements that are referencing an external source.

For example my Google Font link was

<link href="//fonts.googleapis.com/css?family=Open+Sans:400,400i,600,700" rel="stylesheet">

Choosing a new Font Family

Now that Google fonts is gone, I needed to figure out what fonts I was going to use. I decided to use a system-font stack. I heavily based it on the Github stack. I tried researching on the potential addition of system-ui but it still seems to be causing a lot of issues and a lot of places still have it stripped (including Bootstrap).

$font-family:    
    -apple-system,
    BlinkMacSystemFont, 
    'Segoe UI', 
    Roboto, 
    'Helvetica Neue', 
    Arial,
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol';

$code-font-family: 
    SFMono-Regular,
    Consolas,
    'Liberation Mono',
    Menlo,
    monospace;

Overall really happy with the outcome as it looks pretty good to me.

Updated List

A lot of my list has been crossed off so time to update it with some new areas of research

  • Minimizing use of JavaScript
  • Commenting
  • SEO Optimization
  • Share Buttons
  • Crop width of images that are too wide
  • Favicon best practices