Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

General

Turning fonts.googleapis.com off

solved

Solved by pamtbaau View solution

Started by ryan pao 8 years ago · 8 replies · 6544 views
8 years ago

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

TXT
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

8 years ago

FYI

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

TXT
comment out 
// @import "template/fonts"

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

👍 1
8 years ago

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...

8 years ago

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

TXT
"/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!

8 years ago

Un-commented the import font

TXT
@import "template/fonts"

and disabled the google font in

TXT
"/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

8 years ago Solution

@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:
    TXT
    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':

    TXT
    @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:

    TWIG
    {% 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:
      TXT
      /* @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...

last edited 11/07/18 by pamtbaau
8 years ago

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

TXT


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

arigato!!!
8 years ago

@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
last edited 11/07/18 by pamtbaau
8 years ago

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

Suggested topics

Topic Participants Replies Views Activity
General · by Jerry Hunt, 4 days ago
2 80 10 hours ago
General · by pamtbaau, 15 hours ago
1 51 15 hours ago
General · by Andy Miller, 1 day ago
0 45 1 day ago
General · by Marcel, 12 months ago
6 346 5 days ago
General · by Duc , 5 days ago
3 40 5 days ago