New fonts

For support and discussion related to templates, themes, and imagesets in phpBB 3.1.
Get Involved
Locked
User avatar
thevisionisdivine
Registered User
Posts: 141
Joined: Tue Mar 10, 2015 3:36 pm
Name: Bruno Bianco

New fonts

Post by thevisionisdivine » Sat Jul 11, 2015 8:07 pm

Hi.

Herte again after 2-3 weeks of silence.
Your advices are always useful and that's why I ask you if it's possible to install a font ( Horizon ) in phpbb 3.1.x and howto.

Kind Regards
BB
* * * All To Be The Master Of The Wind * * *

User avatar
John connor
Registered User
Posts: 2306
Joined: Fri Nov 14, 2014 5:14 pm
Location: U S Of A
Name: Aaron
Contact:

Re: New fonts

Post by John connor » Sun Jul 12, 2015 11:19 am

Would like to know where the fonts are as well. But I think this might be a theme issue.

User avatar
Arty
Former Team Member
Posts: 16654
Joined: Wed Mar 06, 2002 2:36 pm
Name: Vjacheslav Trushkin
Contact:

Re: New fonts

Post by Arty » Sun Jul 12, 2015 6:02 pm

In any website content, including phpBB, you can only use fonts that are available to your users. Different operating systems have different sets of default fonts that are installed on computers. Google for "Horizon" is not one of those fonts.

You can add custom fonts as web fonts. There are many tutorials on web explaining how to do that. Add custom css or js file in overall_header.html and simple_header.html before main stylesheet is included.

If that font is available on Google Web Fonts library, you can use Google API to include it. See overall_header.html for example of how Open Sans is included, change it to load your font
Vjacheslav Trushkin / Arty.
Free phpBB 3.1 styles | New project: Iconify - modern SVG framework

User avatar
Talk19Zehn
Registered User
Posts: 407
Joined: Tue Aug 09, 2011 1:10 pm
Contact:

Re: New fonts

Post by Talk19Zehn » Tue Jul 14, 2015 8:10 am

Hello, perhaps another example. Create a new folder for yourfreefont --> http://www.fontsquirrel.com/
  • prosilver/theme/font
    prosilver/theme/font/yourfreefont.ttf
set into
prosilver/theme/common.css

Code: Select all

@font-face {
	font-family: yourfreefont;
	src: url("{T_THEME_PATH}/font/yourfreefont.ttf");
}
example ... add, set or change

Code: Select all

.forumtitle { font-family: yourfreefont; }
Hint:
http://wiki.selfhtml.org/wiki/CSS/Eigen ... @font-face
Important(!):
http://www.w3.org/TR/css3-fonts/#same-o ... estriction

Please read more about Google-Fonts:
http://wiki.selfhtml.org/wiki/HTML/Tuto ... ogle-Fonts

Best regards.
World Meteorological Organization (WMO) Weather - Climate - Water
phpBB Advent calendar: sought and found ..
BTW: My own works - phpBB - read more: ongray-design-de or look here: phpBB VT Theme
Style: Star Trek - StarTrekExcerpts - Fan-Board

User avatar
Arty
Former Team Member
Posts: 16654
Joined: Wed Mar 06, 2002 2:36 pm
Name: Vjacheslav Trushkin
Contact:

Re: New fonts

Post by Arty » Tue Jul 14, 2015 6:59 pm

Close enough, except that template variables don't exist in css files in 3.1, so path to font should be relative to css file. In code above replace {T_THEME_PATH} with .

And another great source of information, which is always up to date and correct: https://developer.mozilla.org/en-US/doc ... @font-face
Vjacheslav Trushkin / Arty.
Free phpBB 3.1 styles | New project: Iconify - modern SVG framework

User avatar
Talk19Zehn
Registered User
Posts: 407
Joined: Tue Aug 09, 2011 1:10 pm
Contact:

Re: New fonts

Post by Talk19Zehn » Wed Jul 15, 2015 11:50 am

Hi Arty, yeah there is a mistake, sorry ... :oops:
Thank you that you looked closely at the code! :D

Now 3.1.x - only an example.
As a rule, families are also very important. There are a series of further indications. :)

Code: Select all

@font-face {
	font-family: yourfreefont;
	src: url("./font/yourfreefont.ttf");
}
or

Code: Select all

@font-face {
	font-family: Yourfont;
	src: url("./font/Yourfont.ttf");
}
An image -> example:
font_face_a_topic_title_example.jpg
font_face_a_topic_title_example.jpg (51.72 KiB) Viewed 1253 times
World Meteorological Organization (WMO) Weather - Climate - Water
phpBB Advent calendar: sought and found ..
BTW: My own works - phpBB - read more: ongray-design-de or look here: phpBB VT Theme
Style: Star Trek - StarTrekExcerpts - Fan-Board

El_Lagarto
Registered User
Posts: 43
Joined: Tue Apr 08, 2014 1:21 pm

Re: New fonts

Post by El_Lagarto » Wed Feb 03, 2016 7:53 pm

Arty wrote: If that font is available on Google Web Fonts library, you can use Google API to include it. See overall_header.html for example of how Open Sans is included, change it to load your font
I tried this and it didn't work. No idea why.

When I use

Code: Select all

<link href='https://fonts.googleapis.com/css?family=XXXX' rel='stylesheet' type='text/css'>
instead, it works, but then I have trouble with one of my extensions. Very frustrating.

Edit: Found it! You have to "Allow usage of third party content delivery networks" under General -> Load Settings

Locked

Return to “[3.1.x] Styles Support & Discussion”