Why OXID and Google Fonts – risk of warning and the right solution!

For example, the OXID store uses the Raleway font from the Google Fonts catalog in the Flow template. This page is reloaded from the USA and the visitor’s IP is transmitted to Google.

Now some warning letters are on the way regarding this and we decided to host the corresponding font locally and make the store aware of the changed location.

What to do now:

Using a service such as sicher3.de anyone can have their OXID store searched for Google Fonts. In our case, the RALEWAY font was found in the Flow template.

Now the first look was into the CSS files of the store, which are located under source/out/flow/src/css. Here was no Google entry to find.

The Google fonts are loaded in the flow template (or in a child of it) in the source/application/views/flow/tpl/layout/base.tpl file:

We commented out the line with the “link href” and added the second line

[{oxstyle include="css/gfont.css"}]

This now reloads a CSS file that we created as follows:

First, the font we used was determined. This can then be downloaded as a ZIP archive under Google Webfont Helper. There you get a CSS snippet that matches the webfont, which we copy to the clipboard and then save as a new file, in which we have already referenced in the TPL:

source/out/flow/src/css/gfont.css

/* raleway-regular - latin */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
src: url('../fonts/raleway-v28-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/raleway-v28-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/raleway-v28-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/raleway-v28-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/raleway-v28-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/raleway-v28-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
}

(This of course only applies to the Flow Theme, and of its derivatives and ChildThemes).

Save fonts locally

In the OXID directory structure there is now already a folder for fonts, into which we then also copy our unpacked RALEWAY files. For this we like to use the tool WINscp.
The folder is: source/out/flow/src/fonts/

Now the TMP folder of the store must be emptied. Either via the backend or via console with the rm -r * command. Here please make sure that you are in the folder source/tmp.

As a result you will see in the developer tools: