Try with different Fonts for mobile devices

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
Post Reply
edzela
Registered User
Posts: 55
Joined: Thu Aug 28, 2014 10:00 am

Try with different Fonts for mobile devices

Post by edzela » Thu Oct 17, 2019 10:00 pm

Hi guys,
I want to try with different fonts for mobile devices, please could you advise which files to touch to try these changes?. I see that in mobile devices the Fonts for Post, Fórums, menus, etc are a little bit small.

Thanks

User avatar
Dan Stylez
Registered User
Posts: 273
Joined: Tue Jan 16, 2018 6:17 am

Re: Try with different Fonts for mobile devices

Post by Dan Stylez » Fri Oct 18, 2019 4:49 pm

You would add your font style sheet to the overall header.html

Fjalla One Example:

Code: Select all

<link href="https://fonts.googleapis.com/css?family=Fjalla+One&display=swap" rel="stylesheet">
Then if you wanted to change the font of the topic title on the viewtopic page, there are 2 ways of doing it.


Method 1 - The Common CSS Way:
Open common.css and look for line 28,

Code: Select all

h2 {
	/* Forum header titles */
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 2em;
	margin: 0.8em 0 0.2em 0;
}

On the next line down you could add:

Code: Select all

@media (max-width: 700px) {
	/*  Fjalla One responsive topic title */
	h2 {
		font-family: 'Fjalla One', sans-serif;
	}
}


Method 2 - The Responsive CSS Way:
Open responsive.css and look for line 121, which is: @media (max-width: 700px) {

Now, on line 126, hit enter twice to make 2 new lines, and then add this to line 127,

Code: Select all

	/* Fjalla One responsive topic title
	----------------------------------------*/
	h2 {
		font-family: 'Fjalla One', sans-serif;
	}

So basically, line 121 to 137 would then look like this:

Code: Select all

@media (max-width: 700px) {
	.responsive-hide { display: none !important; }
	.responsive-show { display: block !important; }
	.responsive-show-inline { display: inline !important; }
	.responsive-show-inline-block { display: inline-block !important; }

	/* Fjalla One responsive topic title
	----------------------------------------*/
	h2 {
		font-family: 'Fjalla One', sans-serif;
	}
	
	/* Content wrappers
	----------------------------------------*/
	html {
		height: auto;
	}

You can also add font-size and font-weight etc to adjust it to suit your needs too.
Image
When you’re hot, you’re hot... when you’re cold, you’re not hot.

Post Reply

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