Joomla Templates Club 406,261 posts

[wgallardo Friend wgallardoJoin date: October 2012Posts: 9Downloads:23Uploads:5]

#1094956

Hello I’m using the version T3 from JA University Joomla 3.8.5 and we want to add a custom font for the menus and a google font for the rest of the elements of the website. I tried to follow this guide https://www.joomlart.com/documentation/joomla-faqs/embed-font
My assets looks like this:
<?xml version="1.0" encoding="utf-8"?>

js/script.js

fonts/font-awesome/css/font-awesome.min.css
https://fonts.googleapis.com/css?family=exo+2:400,100,300,500,600,700c

But how add that font to the main menu?
Also how I add more fonts for the rest of the website?

Thanks in advance.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1095237

Hi,

You can follow this documentation for how to add/install new fonts: http://www.t3-framework.org/documentation/bs3-customization#add-fonts

Regards

[wgallardo Friend wgallardoJoin date: October 2012Posts: 9Downloads:23Uploads:5]

#1095360

Adding fonts was more easy than I expected, using assets.xml worked for me, Now I need to know how to assign that font only to the mega menu.
Thanks in advance.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1095485

Hi,

It’s inheriting the base font family declared in this file: root/templates/ja_university_t3 (your default template)/less/variables.less

Look for this:

// Typography
// -------------------------
@font-family-sans-serif:  Arial, "Helvetica Neue", Helvetica, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Monaco, Menlo, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

For example, you want to use Exo font family: https://fonts.google.com/specimen/Exo?selection.family=Exo

You add a new variable:

@font-family-exo: 'Exo', sans-serif;

and change:

@font-family-base:        @font-family-sans-serif;

to:

@font-family-base:        @font-family-exo;

Hope this helps.

[Author]

Posts