XF 2.3 How to add a font?

Levina

Levina

Active member
Hi everybody.

I would like to use a font of my own in some headers. How do I add it to the ACP?
I'm on cloud hosting if that is relevant.

Thanks.
 
Sort by date Sort by votes
You can edit the PAGE_CONTAINER template to add them to the <head> section if that's what you mean. You can then adjust the font stack in the typography style properties, or via extra.less if you need something more granular.
 
Upvote 0 Downvote
Jeremy P said:
You can edit the PAGE_CONTAINER template to add them to the <head> section if that's what you mean. You can then adjust the font stack in the typography style properties, or via extra.less if you need something more granular.
Click to expand...
Thanks, Jeremy. But how do I actually upload the font? I mean, I assume the system doesn't know every font out there?
 
Upvote 0 Downvote
You would need the font in a web-compatible format like WOFF2. Google has a library of fonts which are free to use with instructions for how to use them, for example. You would edit the PAGE_CONTAINER template to include the embed code, and then edit the typography style properties to include the font family.
 
Upvote 0 Downvote
You can also add it on the extra.less template.

Code: 
@font-face {
  font-family: ABC Font;
  src: url(http://example.com/path_to_font/abcfont.woff);
}

You will need the url of the font .woff file if it’s remote, or else upload it to a folder if you can do that on xf cloud.
 
Last edited:
Upvote 0 Downvote
Mr Lucky said:
You can also add it on the extra.less template.

Code: 
@font-face {
  font-family: ABC Font;
  src: url(http://example.com/path_to_font/abcfont.woff);
}

You will need the url of the font .woff file if it’s remote, or else upload it to a folder if you can do that on xf cloud.
Click to expand...
Well, we have a File manager in the ACP so uploading a file shouldn't be a problem.
 
Upvote 0 Downvote
Jeremy P said:
You would need the font in a web-compatible format like WOFF2. Google has a library of fonts which are free to use with instructions for how to use them, for example. You would edit the PAGE_CONTAINER template to include the embed code, and then edit the typography style properties to include the font family.
Click to expand...
Getting the font in a WOFF2 format is more problematic. I have it as a True Type Font but that's not going to do me much good here and it's not in Google's Library of fonts. I could contact the developer of the font, see if they can help.

Thanks a lot, Jeremy!

EDIT: I just bought it in every possible format from the developer. Yay!
 
Last edited:
Upvote 0 Downvote
Mr Lucky said:
That may be true, but I have had no problem - if it works, it works.
Click to expand...
Sure. But I had to get the pro package anyway because the .ttf file I had was a free download and too basic. The pro package includes a .ttf, .otf and .woff file, all with extended language options. I will use the .woff file.
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

CStrategies
XF 2.2 How to add a simple file attachment to a form
Replies
1
Views
38
Digital Doctor
Digital Doctor
Fred.
  • Question Question
XF 2.3 How to add space after custom font awesome node icon?
Replies
2
Views
77
Fred.
Fred.
A
  • Question Question
XF 2.3 How can I Change font size, icons, And add a "Articles" section to the navigation menu?
Replies
1
Views
70
Abu Abdullah
Abu Abdullah
oO5 Dynasty
  • Question Question
XF 2.2 Turned my logo into a font type, and wanted to implement it into xenforo.
Replies
3
Views
359
TPerry
TPerry
DarkGizmo
  • Question Question
XF 2.3 How to add a link in the user navigation only visible by select groups?
Replies
0
Views
20
DarkGizmo
DarkGizmo
Back
Top Bottom