How to install google fonts locally

Hi Doug,

Unfortunately, Nicepage does not provide the option to download Google fonts locally and does not provide the option to use local fonts. In general, if you know CSS and HTML and you have enough skills to edit exported files manually, you can achieve what you want. But we recommend this way only if you have these skills.

...................................................
Sincerely,
Olivia
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Olivia, that part is trivial for me. I am going to install them in a global directory where any theme can access them. This will be /<sitename>/templates/fonts. I hope when you all do add that functionality you will consider this location, but if you use another, I can simply copy them over and put the latest project revision online without having to hack at the files.

For now, in order to save time, could you tell where Nicepage stashes those? the local project json file isn't easily edited and being used to seeing DBMS databases and SQLITE, the lack of formatting and jungle like appearance is a turn off.

In fact I'll put that up on the wishlist :-)

Hi Doug,

Google fonts are loaded in a usual way from the google storage by the link in the page head section. The link to the font file is located in the index.php file. You will need to remove it and load the desired font via the font-face CSS rule. Just like any other custom font. But I cannot guarantee that this will not cause problems with working with fonts in the Nicepage editor.
Please let us know if you have any further questions.

...................................................
Sincerely,
Olivia
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Olivia,

I've done this with earlier wordpress and joomla versions when Google released the fonts originally. So as I said, it should be relatively trivial to make the changes. I just didn't want to have to spend an inordinate amount of time. I guess I could resort to grep to find the files and line#s in the template directory but I'm nowhere near being proficient.

I noticed Nicepage uses a .json type 'database' storing the CSS and HTML info among other things. .json files don't have anything resembling a decent editor so I have to resort to doing it via Python and it's .json library to do any manipulation.

It would be great if Oleg switched to SQLite. Standalone DB like json files and costs the same. Numerous editors available, format clearly outlined and easy to access and manipulate. That doesn't mean people still won't attempt to edit the sole database without making a backup and fork things up. But it would make it easier to script the ETL process with the desired changes and minimal code on the web developers side. More robust and resistant to corruption more than a plain ASCII file such as json.

IMHO, but Oleg is probably more knowledgeable on both to know the pros and cons of each dbase than I am and may get a good chuckle out of my suggestion instead due to that knowledge.

Have a great day!

Hi Doug,

We added your request to our wish list.
Please let us know if you need our further assistance.

...................................................
Sincerely,
Olivia
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Don't know if it works in nicepage. But in themler I did this in the additional css:

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

The google fonts are stored in root/fonts/. Or you store the fonts in the template folder, than css shoud be './fonts/... I think.

A good tool for creating css and downloading the fonts is https://google-webfonts-helper.herokuapp.com/fonts.

Additionally for being 100% sure that no google fonts are loaded, I use a plugin for blocking loading google fonts.
Hope it helps in nicepage, too.

If someone had tried this, please give a feedback because I will have the same problem.

Pitter

This is what I ended up doing in Nicepage to enable a set of fonts. They have that information embedded in a JSON file and I'd asked them about storing the fonts like you did and received a negative answer

https://fonts.googleapis.com/css?family=Tangerine:400,700

/* latin /
@font-face {
font-family: 'Tangerine';
font-style: normal;
font-weight: 400;
src: local('Tangerine Regular'), local('Tangerine-Regular'), url(https://fonts.gstatic.com/s/tangerine/v11/IurY6Y5j_oScZZow4VOxCZZM.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/ latin */
@font-face {
font-family: 'Tangerine';
font-style: normal;
font-weight: 700;
src: local('Tangerine Bold'), local('Tangerine-Bold'), url(https://fonts.gstatic.com/s/tangerine/v11/Iurd6Y5j_oScZZow4VO5srNZi5FN.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}