Add new Custom font for heading

seanmcel

Hi guys

Thanks for your help yesterday helping us to update our JA Sugite template to the latest version, much appreciated. Now the template is updated, we now have some styling issues we would like to resolve please, I hope you don’t mind me putting all of these into the same ticket.

These are:

▪	Change default website font for paragraph and H1, H” headings etc to Helvetica Neue. There seem to be several fonts loading on the site (too many) but we only need two - Century Gothic is our corporate brand so this is for the home page, modules, navigation etc but we would like the body text of the pages to be Helvetica Neue. How do we do this easily please and just load the two basic fonts (I don’t think we need anything from Font Awesome for example)?
▪	How do we get the homepage Amazon module to stretch wider on mobile view?
▪	Is it possible to wrap the text around the images on the product pages for desktop view? Or at least go to the width of the page below the images? On mobile view, can we put the size, colour etc options at the top of the page instead of at the bottom?
▪	Can we make the ‘place order’ button on our checkout page the same green as our ‘add to cart’ and ‘proceed to checkout’ buttons? Can we fix the code so that all the buttons use the full width of the page on mobile view and can we increase the size of the button and the font on both mobile and desktop? It's important that they don't go off the edge of the page also.
▪	Can we include an avatar next to the article author name?
▪	On the English language pages, the top header bar appears deeper as the flag is being pushed under the cart button compared to the other languages. The links on the English pages also appear in green instead of orange, as on the other languages.
▪	The flag gif icons are very blurry - how can we get these to be sharper?
▪	We wish to produce some SVG graphics the same as the first graphic on this page: https://backlinko.com/seo-tutorial. For the JA Sugite template, can we produce them with no writing on them and add this in later? Or is it better with writing already added? On desktop view, the image and writing appear side by side but on the mobile view, one appears above the other. What is the best way to do this please?

I have attached some screenshots to illustrate the above points.

We are also having some issues with page speed. We have JCH Optimise installed but I have disabled it for now as I think it’s conflicting with other extensions and I would like to address this at the template level rather than relying on plugins. Is there a way to configure the template so that we can lazy load the CSS, JS and images once the basic HTML (and any critical CSS) is loaded?

As always, any help much appreciated.

Ninja

seanmcel
Hi
It would be nice if you open each different subject topic in new post , It also helps our community and make the post more accurate to reply.
Let me reply you for the Font part first if you can make different post for each topic that will be better to avoid confusion and faster support.

Fonts changes :
First you need to add the Google font on your website as you wanted with help of this documentation : https://www.joomlart.com/documentation/joomla-faqs/embed-font#google-font-t3
Once added, you can defined the font in the variable.less file in the /less folder of the template.
Here http://prntscr.com/v9u2a0
after this compile less to css to apply changes in the css file.

Take backup of your custom changes before doing this step.
Or make it via theme Magic http://prntscr.com/v9u2rm

Another option if you only want to change font for the specific heading.
Inspect element with browser tool to check the style.
example : http://prntscr.com/v9u3ev
use that code in custom.css file and change the font family. Its simple and search for you as you want it for specific places.

About increase the width of the module its custom module not from template core. Also you are using it in the Mainbody so change width not possible as width is loaded from its main container.

Regards

Ninja

seanmcel
Hi
The custom font family is not defined. Kindly use the custom.css file if you want it only for few areas not variable.less
Here is code http://prntscr.com/vhpd9z

Ninja Another option if you only want to change font for the specific heading.
Inspect element with browser tool to check the style.
example : http://prntscr.com/v9u3ev
use that code in custom.css file and change the font family. Its simple and search for you as you want it for specific places.

seanmcel

Hi Pankaj

Thanks for your help on this. I am unsure if I need to look at the options for JA T3v2 or just T3. Sorry, I am finding the whole fonts thing confusing.

When I look at PageSpeed Insights, we seem to have loads of fonts loading on the site (see attachment). What is the best way to reduce this to just one font and what is the best option to load this font the fastest way to help increase the page speed load times?

Ninja

seanmcel
Hi
Loading of fonts are from Google, In the template the fonts are defined in the tpls/blocks/head.php file
and via /local/etc/assets.xml on your template.

To add all new font kindly follow the guide for T3. JA Sugite template is based on T3.

seanmcel

Thank you. With the Amazon module, the only position I can get it to show is in home-2 position. Is there another position or maybe layout that I can use to get it to appear on the full width of the page?

Ninja

seanmcel
Hi. You can check available position in the template style layout options.
And type the position name.

PS: open a new thread for different topic questions please 😉

seanmcel

Thanks for the above help. Ok, I embedded the new font by adding a folder to the ja_sugite/fonts folder (helvetica-neue-roman) and opening the assets.xml file to add the new font.

When I came to define the font in the variable.less file in the /less folder of the template, I was unsure of which of the many fonts detailed there which ones I should change. And when I tried to compile less to css using the megamenu, I got the attached screen.

Which is the font I need to change for both heading and body text? And for body text, how can I get the type of line spacing as on this page?: https://backlinko.com/seo-tutorial

seanmcel

Sorry, I didn't explain myself clearly enough. I want to change the h1, h2 headings, body text font and menu buttons text for the whole website to Helvetica Neue Roman. What I am trying to do is increase page speed by not loading lots of different fonts. I don't really understand the terminology but I can see from GTMetrix and PageSpeed Insights that the template is trying to load a lot of fonts (Font Awesome etc) so I am trying to cut the number of fonts and hopefully increase the loading speed of the website.

Then, for that particular landing page heading, I will keep just that one heading in Gothic. Everything else on the site will be Helvetica Neue Roman.

Ninja

seanmcel
Hi
Font awesome are loaded from your own site and part of T3 all icons are loaded from that.
Rest of the fonts if you are not using you can remove them from tpls/blocks/head.php
and etc/assets.xml file.
Once they removed it will not load.