Jump to content
LuciBeingLuci

Change Website's Font to Uploaded Font in Mysidia Script

Recommended Posts

LV 6

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.

Share this post


Link to post
Share on other sites
LV 6

I've renamed it to '8bitwonder.ttf' (it had spaces). However, it still doesn't work. Here's what I've tried:image.thumb.png.eff0c833ee617035c622343c6062310e.png

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

	/* 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;
}

Edited by LuciBeingLuci

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites
LV 6
22 hours ago, 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>

 

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!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.




×
×
  • Create New...

Important Information

By using this site, you agree to our Guidelines, Terms of Use, and Privacy Policy.