• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Changing the font for everything

#1
I'm currently using Flexile Dark which seems to use Times New Roman, I've looked through the Appearance settings and there are so many different fields that seem to need to be changed.

1. Is there a simple way of making all text Arial or another similar font?
2. What is recommended as a more modern-looking font? Perhaps I should just set it to whatever is used for the navigation menu (anyone know what it is?).
3. Do I need to specify a font family, or is a single font sufficient?

My website is http://www.hackslashrepeat.com/.
 

MattW

Well-known member
#2
I now use Ubuntu font on my forum via google fonts.

Style Properties --> General --> Body --> Text --> Font Family : 'Ubuntu', Helvetica, Arial, sans-serif

Just had to set an @import ( @import url(http://fonts.googleapis.com/css?family=Ubuntu); ) in the header template file

Set ubuntu as the default message font via:

Style Properties --> Message Elements --> Message Text --> Font Family : 'Ubuntu', Tahoma, "Times New Roman", Times, serif
 

Arkshine

Active member
#3
@import should be avoid.
Google said:
CSS @import allows stylesheets to import other stylesheets. When CSS @import is used from an external stylesheet, the browser is unable to download the stylesheets in parallel, which adds additional round-trip times to the overall page load.
Use :
Code:
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
 
#4
So, use:

HTML:
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
In my header?

Where exactly does everyone put things into their header?
 

MattW

Well-known member
#5
So, use:

HTML:
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
In my header?

Where exactly does everyone put things into their header?
I've got mine in the PAGE_CONTAINER template, but applied via TMS

Added like this

Code:
<xen:include template="page_container_js_head" />
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
 

melbo

Well-known member
#6
I've got mine in the PAGE_CONTAINER template, but applied via TMS
Thanks for the tip. Now I'm using Ubuntu fonts everywhere but have come accross this suggestion at Google Pagespeed Insights:
The following resources are missing a cache validator. Resources that do not specify a cache validator cannot be refreshed efficiently. Specify a Last-Modified or ETag header to enable cache validation for the following resources:
http://fonts.googleapis.com/css?family=Ubuntu

So how would I go about specifying a cache validator for my new fonts?

 

Jake Bunce

XenForo moderator
Staff member
#7
Thanks for the tip. Now I'm using Ubuntu fonts everywhere but have come accross this suggestion at Google Pagespeed Insights:


So how would I go about specifying a cache validator for my new fonts?

Those "cache validator" headers would be the responsibility of Google since that is their resource. You have no control.
 

melbo

Well-known member
#10
I've got mine in the PAGE_CONTAINER template, but applied via TMS

Added like this

Code:
<xen:include template="page_container_js_head" />
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
Matt, are you still using the above method? Your site looks great with ubuntu everywhere!