Change Website's Font to Uploaded Font in Mysidia Script

L

LuciBeingLuci

Artist
So I kinda made up a theme to http://chick3nz.byethost13.com bUT
There's one thing left for the theme (I think, I still have to figure out how people add images for currencies). And it is...

How do you change the website font to an uploaded font? I'm using Mysidia script, and I used the 'Main' theme for the base. The font's name is '8-BIT WONDER' and it is uploaded to the fonts folder. 

When I try to change it, the font becomes all weird, looking like an old site or smth-so I changed it to Arial. However, I still want to do this.

 
I've renamed it to '8bitwonder.ttf' (it had spaces). However, it still doesn't work. Here's what I've tried:View attachment 3865

Edit: Here's also the full code of the theme:

Code: 
	/* Setting Up Basic Styles */
	body {
background:url("http://nutrijardim.com.br/wp-content/uploads/2017/07/cuidados-b%C3%A1sicos-com-a-grama-esmeralda-1080x675.jpg") center; repeat:round; #91C7F5;
font-family:Arial;
font-size:12px;
color:#333;
}
	br {
   display: block;
   margin: 3px 0;
}
	hr {
   display: block;
   margin: 3px 0;
}
	#wrapper {
width:950px;
margin:0 auto;
}
	table {
width:100%;
border-radius: 10px;
background:#FFE4C4;
font-size:12px; 
}
	/* Here's for the top most links */
	th {
padding:10px;
}
	/* Next is our background for the title box, just save your image to the media folder, and put it's name and type in the box. */
	#image {
border-radius: 10px;
background:url("A naice banner.png") left no-repeat #91C7F5;
height:150px;
}
	#image span {
position:relative;
font-size:25px;
padding:10px;
font-family:Georgia, Times New Roman, serif;
}
	/* Change the color of the link for your site title here */
	#image a{
color:#aaa;
text-decoration:none;
font-style:italic;
font-weight:bold;
text-shadow: 0px 1px 1px #eee;
}
#image a:hover {
color:#91C7F5;
text-shadow: 0px 1px 1px #fff;
}
	/* Standard table cell definitions */
	td {
background:#fff;
}
	/* Let's fix up your menu */
	#menu {
width:25%;
background:#fff;
vertical-align:top;
}
	#menu p{
margin:auto 10px;
padding:2px;
}
	#menu h1 {
font-size: 11pt;
border-bottom: 3px solid #DDD;
margin:2px auto 3px 10px;
color: #000;
text-transform:lowercase;
}
	#menu a {
margin:auto 10px;
display: block;
border-bottom: 1px solid #CCC;
padding: 2px;
padding-left: 10px;
text-transform: uppercase;
font-size: 7.5pt;
letter-spacing: 1px;
}
        
#menu a:hover {
background-color: #FFA500;
border-bottom-color: #000;
color: #fff;
}
    
#content {
vertical-align:top;
font-size:12px; 
}
	#footer {
font-size:10px;
text-align:center;
}
	#content p {
padding:3px;
margin:auto 10px;
}
	
#content h1 {
font-size: 16pt;
border-bottom: 1px solid #DDD;
margin:10px;
color: #000;
}
	a{
text-decoration:none;
color:#FFA500;
}
a:hover {
color:#333;
}
 
Last edited by a moderator:
Your coding to declare your font is incorrect. 

Try font-face and font-family.

Code: 
<style> 
@font-face {
  font-family: myCustomFont;
  src: url(8bitwonder.ttf);
}

body {
background:url("http://nutrijardim.com.br/wp-content/uploads/2017/07/cuidados-b%C3%A1sicos-com-a-grama-esmeralda-1080x675.jpg") center; repeat:round; #91C7F5;
font-family: myCustomFont;
font-size:12px;
color:#333;
}
</style>
 
Mobotropolis said:
Your coding to declare your font is incorrect. 

Try font-face and font-family.

<style>
@font-face {
font-family: myCustomFont;
src: url(8bitwonder.ttf);
}

body {
background:url("http://nutrijardim.com.br/wp-content/uploads/2017/07/cuidados-b%C3%A1sicos-com-a-grama-esmeralda-1080x675.jpg") center; repeat:round; #91C7F5;
font-family: myCustomFont;
font-size:12px;
color:#333;
}
</style>
Click to expand...

I literally don't know how to thank you! It worked and I've moved the font to the 'Media' folder of the template. I'll now have to change the size of the text because it looks kinda big now hehehehe

But hey at least it worked!

 
You must log in or register to reply here.
Back
Top