Want to replace the logo with a text written in html and a custom font using google fonts? Read below how.
Step 1: Switch logo with html text - Open "templates"-> "Header templates" -> "header".
Find
Replace with
Step 2: Add a cool google font
1. Choose a font here: https://fonts.google.com
1.1. As example we take Bungee: https://fonts.google.com/specimen/Bungee
2. At the top right you "Select this font". Click on it.
![.png]( "PNG Image")
a7b4219d6a214203881dab5904a4fb2e.png (Size: 1.53 KB / Downloads: 5)
2.1. A window pops up
![.png]( "PNG Image")
e6cfb49c4ee041b8980f3c7ad1d640e6.png (Size: 19.32 KB / Downloads: 9)
2.2 Copy the embed code (api). On this font:
And paste it to the bottom of the "header" template.
2.3 Below the embed code, you see the css style code. Add it with a <div style to the logo text.
So in "header template"
Find
Right after it, add:
And after the text logo html stuff we added from Step 1, close the div with:
Complete code:
Preview:
![[Image: 94637d4809c5402fa04294a748372a59.png]]()
Step 1: Switch logo with html text - Open "templates"-> "Header templates" -> "header".
Find
Code:
<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>Replace with
Code:
<a href="{$mybb->settings['bburl']}/index.php" style="text-decoration: none"><span style="color:#optinalcolorcode; font-size: 24pt;">My Forum</span></a>Step 2: Add a cool google font
1. Choose a font here: https://fonts.google.com
1.1. As example we take Bungee: https://fonts.google.com/specimen/Bungee
2. At the top right you "Select this font". Click on it.
a7b4219d6a214203881dab5904a4fb2e.png (Size: 1.53 KB / Downloads: 5)
2.1. A window pops up
e6cfb49c4ee041b8980f3c7ad1d640e6.png (Size: 19.32 KB / Downloads: 9)
2.2 Copy the embed code (api). On this font:
Code:
<link href="https://fonts.googleapis.com/css?family=Bungee" rel="stylesheet">And paste it to the bottom of the "header" template.
2.3 Below the embed code, you see the css style code. Add it with a <div style to the logo text.
So in "header template"
Find
Code:
<div class="wrapper">Right after it, add:
Code:
<div style="font-family: 'Bungee', cursive;">And after the text logo html stuff we added from Step 1, close the div with:
Code:
</div>Complete code:
Code:
<div style="font-family: 'Bungee', cursive;">
<a href="{$mybb->settings['bburl']}/index.php" style="text-decoration: none"><span style="color:#optinalcolorcode; font-size: 24pt;">My Forum</span></a></div>
<link href="https://fonts.googleapis.com/css?family=Bungee" rel="stylesheet">Preview: