Feel free to donate if you like my tutorials ;)
I have already made a tutorial but the method was not very convenient (we had to do everything manually).
For this new method, you only need a plugin called CAOS for Webfonts | Host Google Fonts Locally.
This plugin will save you lots of time, as it will take care of EVERYTHING!
Let's start with an example. In the Global Styles settings, we have these two fonts, Ubuntu Condensed and Raleway:
Disable Google Fonts in the Oxygen Settings:
Install & activate the fabulous plugin
Go to the plugin settings and search for your fonts (Ubuntu condensed and Raleway):
The two fonts will show up.
After selecting the subsets, you will see all the available fonts with their weights:
Just like in the Global Styles Fonts settings, only keep the weights you need (by removing the ones you don't need).
So at the end, we keep these available fonts:
Click in the Download Fonts button.
Finally, click in the Generate Stylesheet button.
There is literally nothing else to do. The CSS file was generated for you (it will be loaded in each page), the fonts were downloaded and stored in your server. It couldn't be more simple.
There are also some very interesting options, so don't forget to check the documentation:
It will load the fonts locally in the frontend, not in the backend.