Embedding Google Fonts in Moodle

Embedding Google Fonts in Moodle

由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


評比平均分數： -
In reply to Simon Hall

Re: Embedding Google Fonts in Moodle

由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


評比平均分數： -
In reply to Mary Evans

Re: Embedding Google Fonts in Moodle

由Simon Hall發表於

Thanks Mary - all good !

評比平均分數： -
In reply to Simon Hall

Re: Embedding Google Fonts in Moodle

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

評比平均分數： -
In reply to BISS Edtech

Re: Embedding Google Fonts in Moodle

由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

評比平均分數： -
In reply to Mary Evans

Re: Embedding Google Fonts in Moodle

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

評比平均分數： -
In reply to BISS Edtech

Re: Embedding Google Fonts in Moodle

由Fernando Acedo發表於
Plugin developers的相片 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.

評比平均分數： -
In reply to Fernando Acedo

Re: Embedding Google Fonts in Moodle

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

評比平均分數： -
In reply to BISS Edtech

Re: Embedding Google Fonts in Moodle

由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

評比平均分數： -
In reply to BISS Edtech

Re: Embedding Google Fonts in Moodle

由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!

評比平均分數： -
In reply to Mary Evans

Re: Embedding Google Fonts in Moodle

由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.
評比平均分數： -
In reply to BISS Edtech

Re: Embedding Google Fonts in Moodle

由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

評比平均分數： -