Turning fonts.googleapis.com off

1

Greetings grav community!

I have been building an GRAV based intranet and it is nearing its official launch.

Suddenly a tall order came through that demanding that 30% of the users do not have an internet access.

When I’ve tested the Grav based intranet the load was extremely slow (due to fetching fonts.googleapis.com in a closed environment. and plugins like [pdf-js]=cloudflare.com etc…).

While I’m using an original theme which extends antimatter, is there a correct or hassle free way to
stop accessing or using google fonts?

I’ve read that option to disable google font was found in the older versions of admin panel, but not missing in the current one.

my current quick and dirty fix was to comment out

template/_fonts.scss
// @import url(//fonts.googleapis.com/css?family=Montserrat:400|Raleway:300,400,600|Inconsolata);

on my theme and antimatter

or should I edit the “configuration/template/_typography.scss”
to exclude [Inconsolata,Montserrat,Raleway]

I want this tweak to be hassle free as possible when grav or grav themes updates

thanks
ryan

2

FYI

To turn off fonts from outside source:
edit: /user/themes/your-theme/scss/template.scss

comment out 
// @import "template/fonts"

no need to fidget with other files as I’ve mentioned above.

1 Like
3

Wouldn’t that get deleted as soon as the Antimatter theme gets an update?
Might be worth checking out theme inheritance and create a child theme I think…

4

You are correct !
I’ve commented out the line in my extended theme.

While I was on this topic, I’ve found the switch to turn google fonts off in

"/yourPROJECT/admin/plugins/admin"

I knew this switch existed, but was not able to find it in /admin,
and thought it was a deleted feature and took the comment out approach.

thanx!

5

Un-commented the import font

@import "template/fonts"

and disabled the google font in

"/yourPROJECT/admin/plugins/admin"

but unfortunately the page is trying to get Monserrat font from google.

so at the moment I’ll stick to commenting out the @import font

6

@ryan To switch of Google fonts for both back-end (Admin) and front-end you will have to make some changes in two area’s:

  • Admin:
    By default, the Admin panel does not use any Google fonts. The setting ‘google_fonts’ in ‘user/plugins/admin/admin.yaml’ is ‘false’ by default.
    When changing the setting in ‘user/config/plugins/admin.yaml’ (note the different folders) to ‘true’, the admin panel will load:

    https://fonts.googleapis.com/css?family=Roboto:300,400,500|Inconsolata:400,700|&subset=latin-ext

  • Stylesheet of theme:
    Antimatter imports Google fonts in its stylesheet ‘user/themes/antimatter/scss/template/_fonts.scss’:

    @import url(//fonts.googleapis.com/css?family=Montserrat:400|Raleway:300,400,600|Inconsolata);

    This file is eventually compiled into ‘/user/themes/antimatter/css-compiled/template.css’.

    In your own inherited theme you can prevent this import in several ways. You could change the scss and recompile it, or change the generated ‘template.css’ file, which is called by ‘/user/themes/antimatter/templates/partials/base.html.twig’ file:

    {% do assets.addCss('theme://css-compiled/template.css', 101) %}

    The last option is the most simple solution:

    • Copy ‘/user/themes/antimatter/css-compiled/template.css’ into your own theme’s ‘/user/themes/mytheme/css-compiled/template.css’
    • Comment out, or remove, the import line:
      /* @import url(//fonts.googleapis.com/css?family=Montserrat:400|Raleway:300,400,600|Inconsolata); */

    Since Montserrat, Raleway and Inconsolata are no longer fetched from Google, the stylesheet will fallback to "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; for body and headers.

Hope this helps…

7

WoW !!! @pamtbaau
Thank you very much for clarifying the font situation!!
thought that the admin switch was for the front end. (antimatter)

I will revert
~// @import “template/fonts”~

and comment out the

// @import url(//fonts.googleapis.com/css?family=Montserrat:400|Raleway:300,400,600|Inconsolata);

arigato!!!

8

@ryan Sorry, I mistakenly used SCSS style comments (//) inside my answer. I have corrected it in my answer.

Although // @import ... works (the statement just fails I guess), the proper way of using comments in CSS is /* @import .... */

1 Like
9

@pamtbaau no worries
I the information it self is GOLD !!!