in the website

Boilerplate can be bad, and I was an idiot for using it. I used the same @font-face boilerplate code across three sites: Here, 091 Labs, and Alanna’s new Anchor site. The boilerplate is:

@font-face {
    font-family: 'Source Code Pro Regular';
        url('fonts/source_code_pro/scp-r.eot?') format('embedded-opentype'),
        url('fonts/source_code_pro/scp-r.woff') format('woff'),
        url('fonts/source_code_pro/scp-r.otf')  format('opentype'),
        url('fonts/source_code_pro/scp-r.ttf')  format('truetype'),
        url('fonts/source_code_pro/scp-r.svg')  format('svg');

Here is a typical piece of the font-family selection code I recycled:

h1, h2, h3, h4, h5, h6 {
    color: #343537;
    font: bold 2.75em 'Source Code Pro', impact;
    letter-spacing: 0;
    text-align: left;

I declare the @font-face, but never actually use it. And even if the font-face would happen to load, it is also the incorrect file: The typeface file in question is actually the bold version. It was pointed out to me in a Reddit thread last night when a user complained about ugly typefaces on a site I submitted for critique.

So, fuck. Lesson learned. The solution was to move from self-hosted @font-face’s to Google Fonts, for at least common typefaces, and then triple-check @font-face boilerplate in future.

March 20

in me

Your email address will not be published. Required fields are marked *