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

[Marcel Iseli]

Dear IPB Pro's

I need someone that can help me to change the font on my forum from Open Sans to "Helvetica" (or any other web-safe font). 

This is a paid job. If you are interested in it, please write me a DM. 

Kind regards,

Marcel

my website: Linguaholic

[Nathan Explosion]

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 December 27, 2020 by Nathan Explosion

[Marcel Iseli]

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

[Nathan Explosion]

The above should have changed ALL - " "body *" means all elements in the body, "!important" means override anything else set in other CSS.

What hasn't changed?

[Marcel Iseli]

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.

[Nathan Explosion]

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.

[Marcel Iseli]

I will try that! But first making a backup, hehe. Thank you very much Nathan.

Can't believe IPB does not feature a Web-Safe Font straight out the box. 

[Davyc]

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:

The font can be changed using:

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

And makes it into this:

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 🙂

 

[Marcel Iseli]

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 ;(

 

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:

The font can be changed using:

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

And makes it into this:

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. :=)

 

 

[Nathan Explosion]

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.

[Marcel Iseli]

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

[My Sharona]

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?

[Randy Calvert]

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

[My Sharona]

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?

[Randy Calvert]

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 March 15, 2022 by Randy Calvert

[My Sharona]

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.

[Nathan Explosion]

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?