Jump to content

Need help with FONT CHANGE on my forum [paid job]


Recommended Posts

image.thumb.png.a6bc4534c0444e5213a1c821f8e11dbd.png

Click the 'Edit' option for your theme (the top arrow) and go to the "Text" tab of the options - you can change font from a pre-defined set of options, to see if any of those suit your needs.

If you want to use something other than those then edit your theme's HTML & CSS (the bottom arrow), then add the following to your custom.css file:

body *{
  font-family: Helvetica; !important
}

Should do the job.

Edited by Nathan Explosion
Link to comment
Share on other sites

Hey Nathan!

Thank you very much indeed! I did this and it looks like this works!

However, the thing is that I would like to change all fonts on the website to Helvetica, not just the body font. Can that also be done by adding some more custom css?

Thanks a million for your help. I really appreciate it!

Kind regards,

Marcel

Link to comment
Share on other sites

That's interesting, Nathan. Thank you very much for your message!

Well. One thing that has not changed is that all kinds of other Google Fonts still get loaded (as far as Google Pagespeed is concerned), which has a very bad impact on my SiteSpeed. (see screenshot).

I would like to make sure that Google Fonts are NOT loaded at all and just my web-safe Helvetica font is used for absolutely everything.

There's still a couple of .woff fonts that get loaded (open sans, roboto) and so on.

Screen Shot 2020-12-27 at 11.47.21 AM.png

Link to comment
Share on other sites

There will be some CSS with specific fonts assigned to an element - if you use the browser console to discover these you will find the elements affected and you can change the CSS to whatever font you want and add it to your custom CSS file.

An example would be on this site - your user name, as below:

image.png.dca93eae3a2eaf40acf3c7ae29d5cdb2.png

The font can be changed using:

.ipsType_break {
    word-wrap: break-word;
    word-break: break-word;
    font-family: "tahoma";
}

And makes it into this:

image.png.022d6bbf173dced92e641254cf4df798.png

You can drill this right down to a specific element on a specific page if you find the right combination of elements to group. The trick is not to allow one change to affect other elements, which can happen if you're not careful.  Playing with CSS can be both fun and frustrating, but have a go 🙂

 

Link to comment
Share on other sites

On 12/27/2020 at 12:24 PM, Nathan Explosion said:

Yeah, custom css isn't going to change that. The site loads up the fonts defined in the theme....the custom css just overrides the one used.

TOTALLY UNTESTED OPTION - USE AT YOUR OWN RISK

Edit the global -> global -> includeCSS template and remove the chunk of code at the top which relates to loading of fonts.

I have done that and the website is still loading fine. 

However, the website is still loading this .woff file here, which has a very bad impact on site speed (see screenshot).

I would like to prevent fontawesome from loading at all and use Helvetiva for everything. 

It looks everything is running on Helvetica now but it is still loading this .woff file ;(

 

Screen Shot 2020-12-28 at 9.06.46 PM.png

On 12/27/2020 at 6:40 PM, Davyc said:

There will be some CSS with specific fonts assigned to an element - if you use the browser console to discover these you will find the elements affected and you can change the CSS to whatever font you want and add it to your custom CSS file.

An example would be on this site - your user name, as below:

image.png.dca93eae3a2eaf40acf3c7ae29d5cdb2.png

The font can be changed using:


.ipsType_break {
    word-wrap: break-word;
    word-break: break-word;
    font-family: "tahoma";
}

And makes it into this:

image.png.022d6bbf173dced92e641254cf4df798.png

You can drill this right down to a specific element on a specific page if you find the right combination of elements to group. The trick is not to allow one change to affect other elements, which can happen if you're not careful.  Playing with CSS can be both fun and frustrating, but have a go 🙂

 

I changed everything to Helvetica and it looks great. In fact I would just like a single font (Helvetica) and make sure nothing else is loaded. Especially not fontawesome, which has a very bad influence on sitespeed (in general). 

Any idea on how to stop font awesome from loading at all? If yes, please let me know. I would highly appreciate that. :=)

 

 

Screen Shot 2020-12-28 at 9.06.46 PM.png

Link to comment
Share on other sites

5 minutes ago, Nathan Explosion said:

Considering that a large amount of the suite uses fontawesome for icons, you don't want to disable it and I won't provide assistance on doing so.

I respect that obviously. I thought that font awesome was just for the fonts itself but as it rather for the icons, I do understand that that wouldn't make any sense.

I just find it super silly that iPB does not care about site speed. 2 seconds to load these icons, that's ridiculous. And no web-safe font to start with...why? I couldn't care less about small icons like that. I would like to have a built-in option to turn these things off or just use the most essential ones. 

Thanks for all the help you provided. I think my website is running fine now on Helvetica.

Best,

M

Link to comment
Share on other sites

  • 1 year later...
1 hour ago, My Sharona said:

Can I jump onto this conversation without creating a new thread?

I *think I understand the above discussion but my problem is slightly different. Is there a way to incorporate a font that is a custom creation and not a Google Font?

You can edit your theme, but absolutely doable.  

https://www.pagecloud.com/blog/how-to-add-custom-fonts-to-any-website

Link to comment
Share on other sites

18 minutes ago, Randy Calvert said:

You can edit your theme, but absolutely doable.  

https://www.pagecloud.com/blog/how-to-add-custom-fonts-to-any-website

Thank you for the response, much appreciated.

Reading that blog article, I am assuming I would need server access. As such, I imagine IPS Cloud members would not be able to do this.

Is there another avenue?

Link to comment
Share on other sites

19 minutes ago, My Sharona said:

Thank you for the response, much appreciated.

Reading that blog article, I am assuming I would need server access. As such, I imagine IPS Cloud members would not be able to do this.

Is there another avenue?

No...  you need the fonts somewhere accessible to the internet.  It does not have to be on IPB.  

You could create an AWS S3 bucket, or have a friend host the file for you from their site, use a Font hosting company, etc.  

https://www.hongkiat.com/blog/webfont-comparison/

The AWS cost should be pretty low with the cost being MAYBE a penny a month for the storage.  The bandwidth again should be super low as well considering it's just a few font files and a super small percentage of the total site traffic.   

 

 

Edited by Randy Calvert
Link to comment
Share on other sites

1 minute ago, Randy Calvert said:

No...  you need the fonts somewhere accessible to the internet.  It does not have to be on IPB.  

You could create an AWS S3 bucket, or have a friend host the file for you from their site, use a Font hosting company, etc.  

https://www.hongkiat.com/blog/webfont-comparison/

The AWS cost should be pretty low with the cost being MAYBE a penny a month for the storage.  The bandwidth again should be super low as well considering it's just a few font files and a super small percentage of the total site traffic.   

Fantastic. Will hopefully get to try and apply this within the next month.

Thank you for your help, will update on how it goes.

Link to comment
Share on other sites

1 hour ago, Randy Calvert said:

No...  you need the fonts somewhere accessible to the internet.  It does not have to be on IPB.  

You could create an AWS S3 bucket, or have a friend host the file for you from their site, use a Font hosting company, etc.  

https://www.hongkiat.com/blog/webfont-comparison/

The AWS cost should be pretty low with the cost being MAYBE a penny a month for the storage.  The bandwidth again should be super low as well considering it's just a few font files and a super small percentage of the total site traffic.   

 

 

You do know that you can upload files as resources into a theme, yes?

image.png.a51162fed5c169dbfa65c7b043f022cf.png

 

Link to comment
Share on other sites

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...