HI folks … as I’m about to be enmeshed in a highly complex project for my own company, I won’t have *any* time to post “pay it forward” help around here anymore, but I thought I’d share one last thing for now — which I’d promised to do, and I just did in another post on this topic …
this is “broad strokes” on how to optimize the font loading for using Google fonts, such as OpenSans for your site; to not load the remote style sheet from Google and solve one of the issues from optimization testing related to Google fonts. This might even gain you a point in some cases!
———– SNIP————-
The theme does not load fonts via functions.php; but from the MAIN functions file used by the theme inside the /includes folder as I noted.
The following would be how we do it, in broad strokes — with idea of using OpenSans, removing roboto, and loading the CSS locally for OpenSans vs remotely.
Anybody planning to hack the theme in *any* way should explore the files in there to see what is going on with the theme.
So, to wit
theme/includes/td_wp_booster_functions.php
see around line 1318 – 1340
helps to use a proper text editor (I used “TextPad” on Windows, BBEdit on Mac).
I have not done this in awhile, but as I’m no longer going to be around here to help out, needing to move onto other things I’ll try to provide a starter point for you.
I believe I removed the whole Google fonts section; or perhaps only left in the first section as it caused error to remove it all.
————-
Next you need to search/replace any instance of Roboto from your style.css ; change the default fonts to OpenSans as you won’t be using the control panel to select it anymore.
————
‘capture’ the CSS from Google; presumably those of you who are new to HTML, webdev, etc., likely don’t understand what is going on with CSS (cascading style sheet) and how fonts are loaded.
So, basically when you “request” the fonts from Google using their API, you’re not loading the fonts, you’re loading a style sheet on their server, which in turn loads the fonts — a redirect of sorts. And this does show up as “something to fix” when doing optimization tests.
So, an old trick most of learned in the olden days of hand coding our websites from scratch is that you can put that API link into a browser window, or email it to yourself as a link also works …
Put another way if you were to go to the Google font repository, or look at the theme code, you end up with their API call, which looks something like this:
://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic
Now if you know what you’re doing, again, you can put that URL into a browser window and it will spit out the actual “what is being loaded from that URL” … which actually looks like this:
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url(http://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
that is the actual CSS being loaded .. and you can put this at the bottom of your style.css file to load the fonts from your own style sheet vs loading their style sheet remotely.
So, if you combine the three things
a) search/replace your /theme/style.css to make OpenSans your default font; remove Roboto
b) remove the section in the theme main config file so that it’s NOT loading the remote style sheets
c) put your captured CSS from Google at bottom of YOUR /theme/style.css
d) there may be one instance of roboto somewhere else in the admin code files, but I forget where that is at the moment (sorry)
e) while it should be self-evident — if your site is https; change the http in above to https.
Then you have saved the redirect of the extra style sheet being loaded from Google’s server.
You can modify this procedure to use different fonts, or multiple fonts. Just setup the fonts you want on Google’s font site, get the embed code; then “capture” the actual CSS.
Try it 🙂
Yes, also be aware that this may break on some systems — as noted in the warnings for use of that in Yoast plugin.
SO, be aware that is not a “feature” per se, it’s a notable “HACK” which may break some things which look for normal permalink structure in WordPress.
This is why I did not suggest that. If you notice oddities with your permalinks this will be the cause of those issues. It broke several things when I tried to do this exact same thing, and was not a good solution for reliability and does not help SEO in any way. So, be “careful” with that solution 🙂
So, keep an eye on that, in other words! (But don’t panic; just letting you know it didn’t work for us.)
Yes, when you move to a NEW theme, you need to redo your menus for the new theme; sidebar widgets get moved to “inactive” state due to how WordPress works and some CSS has changed … it’s basically a NEW theme. But you’re not obligated to use it; the old v4 isn’t going to stop working. The only reason to upgrade to the NEW theme is if you want all the new features, new grid, new functions, new CSS, etc.
There is no 1:1 upgrade from v4 to v6 just as there would not be moving from any theme to another.
To use the new theme you need to upgrade per the instructions, then adjust and refresh certain things to fit the different layout, new menu options, and so forth.
One option is to clone your existing site into a sub-domain, then do the upgrade, revise things to work with new theme then move over the settings to your production site — this is how it’s done for most professional settings.
(I am not on staff here, and won’t be providing any help after today in these forums, but I was checking on something else for my own use and thought I’d give you that feedback — its not an update, it’s a whole new theme …. hence the issue you’re running into …)
