Embedding Google Fonts in Moodle

Embedding Google Fonts in Moodle

by Simon Hall -
Number of replies: 11

Hi There Guys,


Does anyone have clear instructions or a tutorial on how to enable Google fonts to be used in a Moodle site ? (e.g Embedded Fonts)

I am using the Afterburner theme in 2.7.

I really would just like to know which file  I add the <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

declaration to if possible.


Thanks,


Simon


Average of ratings: -
In reply to Simon Hall

Re: Embedding Google Fonts in Moodle

by Mary Evans -

Yes...like this...

https://github.com/lazydaisy/tiny-bootstrap-project/blob/master/layout/default.php#L65

You then need to tell Moodle where you want the font to be used...

#site-news-forum h2,
#frontpage-course-list h2,
#frontpage-category-names h2,
#frontpage-category-combo h2 {
    border-bottom: 1px solid #ddd;
    font-size: 1.4em;
    font-weight: bold;
    font-family: 'Eagle Lake', serif;
}

If you have any problems let me know...

Cheers

Mary


Average of ratings: -
In reply to Mary Evans

Re: Embedding Google Fonts in Moodle

by Simon Hall -

Thanks Mary - all good !

Average of ratings: -
In reply to Simon Hall

Re: Embedding Google Fonts in Moodle

by BISS Edtech -

Hi all,


Anyone having problems with Moodle displaying google fonts using Safari? Have this working on Chrome and Firefox, but Safari has me stumped.


Thanks. 

Average of ratings: -
In reply to BISS Edtech

Re: Embedding Google Fonts in Moodle

by Mary Evans -

Hi, 

The font will be there for Safari, what perhaps is missing is the .safari which you need to add in front of the CSS so that Safari can be targeted.

That said that is only a guess. It may be a bigger problem...

Have you tried to google it? May not be a Moodle problem but one that relates to the font type.

What font are you loading that Safari does not pick up?

You may find this useful

https://developers.google.com/fonts/docs/troubleshooting

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Embedding Google Fonts in Moodle

by BISS Edtech -

Hi Mary,

I'm actually using a China hosted mirror  - http://fonts.useso.com/ - as google fonts is blocked here. Couldn't get this working nin the theme's CSS so have replaced the google fonts references in the adaptable theme's header.php file but the fonts are still proving problematic without a VPN. 


Might need to move this discussion to another thread - either the google fonts in China thread or the adaptable theme thread.

Average of ratings: -
In reply to BISS Edtech

Re: Embedding Google Fonts in Moodle

by Fernando Acedo -
Picture of Plugin developers Picture of Testers

I know there are issues using Google Fonts in China (or any other Google product) but fonts.useso.com provides a Google Fonts CDN. You need to replace all the https://fonts.googleapis.com/ instances for http://fonts.useso.com/ in header.php

Notice the https:// used by Google Fonts and the http:// used by Useso Fonts.

I was testing this link (from Europe) and I don't see any issue:

http://fonts.useso.com/css?family=Open+Sans:300,400,600&subset=latin,latin-ext

I will try to test it later from China but it should works even better.

Average of ratings: -
In reply to Fernando Acedo

Re: Embedding Google Fonts in Moodle

by BISS Edtech -
Hi Fernando, Yes, I've been using that CDN, with mixed results. The main problem I'm experiencing with that method is that the moodle site won't load in chrome without a VPN, despite having removed all the google font references and replaced them with the useso cdn link. So I'm guessing there must be a call to google fonts from chrome for some reason, but can't find anything in the css to indicate that this is the case. Fine in Safari and firefox.


Thanks.

Average of ratings: -
In reply to BISS Edtech

Re: Embedding Google Fonts in Moodle

by BISS Edtech -
So, an update - most of the fonts were loading in chrome, except for the roboto slab that I was using for headers. Have switched this to roboto and it now seems to be loading in chrome. Wondering if this may have been due to Roboto Slab not being supported by fonts.useseo.com (only seems to have woff and not other formats)


http://fonts.useso.com/css?family=Roboto+Slab

Average of ratings: -
In reply to BISS Edtech

Re: Embedding Google Fonts in Moodle

by Mary Evans -

Yes that is probably the reason, I don't think they carry all the fonts.

By the way in your first post to this discussion, you said Chrome was ok but not Sadari, tgat was causing you problems.

Now you are saying Safari is ok but chrome isn't!

Average of ratings: -
In reply to Mary Evans

Re: Embedding Google Fonts in Moodle

by BISS Edtech -
Yes, initially Safari wasn't working when I tried altering the CSS with font-face, so I switched to changing the header.php file, whereupon chrome stopped.
Average of ratings: -
In reply to BISS Edtech

Re: Embedding Google Fonts in Moodle

by Mary Evans -

The mind boggles...you start messing about with Theme files and then worry why things aren't working and dare to blame Moodle.

So that this topic can be understood by others with a similar problem, can you list the changes you made to the 'Adaptable' theme?

Many thanks

Mary

Average of ratings: -