[Resolved] Adding Local Fonts

[John]

After entering the topic title, there were suggested posts and an article that might help, but I’d already checked those out (and some others). I’m a recent GeneratePress Pro user and am experimenting to see how things work — I’d like to get the most out of this theme (and use it on all my WordPress websites). So…

This is my first experiment involving modifications rather than just using GP Pro out-of-the-box (clearly, I love it!). The experiment is to have a website use only local fonts (i.e. fonts on my hosting provider’s server for my account).

I followed the Adding Local Fonts article (I have it book marked) to the letter. I cannot get to use a font I have installed (I tried a couple). They do show up in Typography when I go into Customize, but setting one of them (I tried all of them) doesn’t work. I have double-checked (and triple-, quadruple-checked) the code, the file names, the font-family, etc., and it appears correct (to me!).

Using a style in a post (i.e. using the text editor to put in a span tag with font-family specified) also doesn’t work. So presumably the @font-family CSS isn’t working.

I have some questions, but would, of course, appreciate any assistance you can provide:

1. Why do I have to use a full URL in the @font-face CSS directive? Doing so makes testing using a different domain name (or sub-domain) tedious and introduces one more step that can go wrong when taking a website “live”? I’d much rather use a relative URL that did not depend on the domain name.
2. Is there a problem using only a TTF (or OTF) version of a font?
3. When I follow the instructions in Customizing the Google Fonts List and set the number to 0 (zero), it has the desired effect on the Google fonts list, but then a whole bunch of fonts get added to the system font stack. Why is that? Are they really local fonts?

Regards,
John

[Tom]

Hi John,

1. We say to use the full URL just to prevent relative directory issues. For example, if someone adds the CSS into the Additional CSS section in the Customizer, relative URLs won’t work. If you’re adding the CSS to your child theme, then you can use relative URLs.

2. It really depends on the browser support you’re trying to achieve. The Google Fonts helper we link to in that article has some information on that.

3. That’s strange – they shouldn’t. Are you trying to remove all of the Google Fonts from the list? If so, this should help: https://gist.github.com/generatepress/2d037a5a7341ffc67c6af1a056b54e34

I just checked out your site, and it seems you’re using the system stack. If you’d like to switch to the local font that isn’t working, I should be able to pinpoint the issue.

[John]

1. Excellent! For the moment, I will leave the full URLs (following the rule of “Only change one variable at a time”).

2. At the moment, I’m not worried about different browsers. I understand I may need to add a “bunch” of different font file formats for live sites. Personally, I use Firefox as my primary browser and Chromium as a secondary one — all under Linux (Mint).

3. Not so much remove all Google fonts as remove all non-local ones. I assume the function you pointed at only removes non-local fonts — is that correct? Again, I won’t add the function until the basic problem is resolved (see (1).

I have changed the Header to use URW Chancery (it’s an italic script) for the site title. I have nothing secret on this site and it’s in a “separate” hosting account (I have an inexpensive reseller account, so can add independent accounts — great for testing). So I’m quite happy to give you admin access to poke around. If you want to try this, send me a private email message containing your email address and I’ll add an admin account to WordPress for you.

[Tom]

In your CSS, I see these fonts defined:

Open Sans – not seeing this font anywhere on the page

Orbitron – this is working in your tagline and footer

URW Chancery – this one is only loading the ttf file. Can you try adding all of the other files as well? I believe ttf is only for Android, Safari and iOS

Chorus – same as the above

Georgia – same as the above

[John]

I have resolved the issue (with a good hint from Tom) and have some resources and comments to share.

First, the primary problem I ran into is that browsers don’t appear to be supporting TTF, although I’m almost positive I used just TTF successfully in the past (either I’m mistaken or copyright issues have clamped down on this). In any case…

One can create other font file formats from a TTF file using this handy site:
http://www.freefontconverter.com/#

The best documentation I’ve found so far about @fontface is on Mozilla’s website. It actually explains it and gives the correct syntax. I’m surprised a web search didn’t show the official CSS website (and I was too lazy to go to it and search there). It is here:
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

Unless you are worried about supporting legacy browsers, WOFF2 and WOFF seem to be the only ones you really need. I no longer use Apple products, so I don’t know whether iOS supports a “modern” browser (Firefox under Android has no problem).

You do not need to put fonts in a child theme and I, personally, would not recommend it. The reason is that you want to be able to share fonts among themes without duplicating them. For a WordPress website, I would recommend /wp-content/fonts/ (which is where I put mine).

You can download Google’s free fonts — follow the links Tom provided to see how.

[Tom]

Glad you got it working, John! Thanks for sharing 🙂

[Author]

Posts