Hi,
Is it possible to combine the font files into the main styles css or combine the font files into one file..
trying to improve load time any way i can.
Yes. I do this.
Basically get the actual CSS from Google, and add that to bottom of your style.css file, then edit the pull info from the main config file for theme inside the includes/ folder.
Can you elaborate a little on this process for us of limited technical ability 🙂
It’s something I would like to try and do but you lost me at ‘then edit the pull info from the main config’
Any help is always appreciated
I tried looking in functions.php but can’t seem to find where those font are being enqueued from.
Can anybody explain this in more detail?
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
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 🙂
Thanks, but using custom web-fonts will be easier! 😛
Right, this was to help with @gfran5 question 🙂
You can, of course, load custom fonts locally; but then you’d still need to disable loading any Google fonts by the theme, as applicable.
Actually Google has made Roboto open source, so technically you *could* now load that font locally if so inclined. TagDiv could even include that as default font if they wanted, which is cool.
