Adding a google font to a wordpress theme (via child theme)

Anatomy: Background // What you came here for // Conclusion

Background:
Since I’ve gone freelance, a number of jobs I’ve done are WordPress updates, repairs, and migrations.

It’s been a challenge and forced me to rework my general approach to technical troubleshooting to save time. I have a locust of problems experienced locusting through my poor head right now from the site I’m currently working on, and situations worth mentioning from past sites. Do I fix these problems the right way, or blindly toss a patch in for the next poor soul 3 years later? I try to do it the right way–I’ll slowly get fast at all the right ways.

The site I’m currently working on is for a big-time music video producer–its theme hasn’t been updated in 3 years, and lives somewhat inharmoniously with an almost-up-to-date WordPress core. It’s slow, and barely responsive (to screens/mobile).

What you came here for:

The client wants this Google Font:
https://fonts.google.com/?query=arapey&selection.family=Arapey

  1. I tried the quick and wrong way first so I could instead work on more important problems. Keyword: tried.

    In /wp-content/themes/aware/header.php towards the top of <head></head> section, insert the code <link href=”https://fonts.googleapis.com/css?family=Arapey” rel=”stylesheet”>

    It is safer to do it towards the top of the head section, ensuring you don’t accidentally place the font-import after the CSS import which calls for the font. That is it say, you want this order of events: (1) Import font, (2) Import CSS file that says, “use this font.”

    Calling for google font above any other style sheets.
    Notice the stylesheet is called immediately after, and definitely outside of any php tags (though you could have it inside of php tags if you echo the <script> statement).

    I then modified /wp-content/themes/aware/styles.css. I searched for font-family in that file and added ‘Poiret One’ and an !important tag. That is: font-family: ‘Poiret One’, Arial, Helvetica, sans-serif !important;

    add the new google font as the first font to use
    Unashamed use of !important.

    But it didn’t work and I didn’t delve into why.

  2. With some quick google-fu, I found some tips on adding the font to this theme the correct way. Update with that in progress.

Leave a Reply

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