Try with different Fonts for mobile devices

[edzela]

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

[DTMWC]

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.