[Boards: 3 / a / aco / adv / an / asp / b / biz / c / cgl / ck / cm / co / d / diy / e / fa / fit / g / gd / gif / h / hc / his / hm / hr / i / ic / int / jp / k / lgbt / lit / m / mlp / mu / n / news / o / out / p / po / pol / qa / r / r9k / s / s4s / sci / soc / sp / t / tg / toy / trash / trv / tv / u / v / vg / vp / vr / w / wg / wsg / wsr / x / y ] [Home]
4chanarchives logo
Please coders help, how do I use a custom font on this thing
Images are sometimes not shown due to bandwidth/network limitations. Refreshing the page usually helps.

You are currently reading a thread in /g/ - Technology

Thread replies: 29
Thread images: 7
File: latest_cb_20110522114209.jpg (36 KB, 635x448) Image search: [Google]
latest_cb_20110522114209.jpg
36 KB, 635x448
Please coders help, how do I use a custom font on this thing?

http://rpg.pwntendo.com

The "Final Fantasy 6" font has no special characters which I need. How do I use a custom font? It should be easy for anyone in here that knows how to code to figure it out.

I have tried downloading the page to try to modify it online but doesn't work when I open the html, the blue box for the text doesn't show up and the font is missing.

I just want to make dialog boxes in final fantasy style for an animation and this box would make me go way faster since I just need to add character name and text and "save as image". With paint I ned to align the text etc each time.
>>
>>51911753
>try to modify it online
I meant offline
>>
>>51911753
install gentoo
then read the sticky.
>>
>>51911760
i am posting this from gentoo
>>
please coders it should be fairly easy to do for you
>>
>>51911753
Download page. Download *.js and *.css. Modify it. It's literally that easy if you get the paths right.
>>
>>51911842
How to properly download the page? I tried "save as" but when I open the html in my hard disk, what I see is a mess, its only the text, with an incorrect form, and the blue box image is missing, and the actual final fantasy text doesnt show up when I write.
>>
>>51911888
This is what I see.

I assume that this happens because the code contains the url for the image file for the blue box and also the custom font.
So I just need to change those urls to the location my hard disk? for example in the image
"C:/images/textbog.png"

and the font for the .ttf file? I will try.
>>
>>51911955
I will give you a hint.
https://github.com/TheJF/RPGTextboxGen/blob/master/styles/fonts.less
>>
>>51912027
Ah you found it on github
Well Im trying to change the urls to local files in this case the already included final fantasy 6 fonts but im doing something wrong in the sintax... how do I properly point to a folder?
"url" is only for online or do I just add the folder path inside the ' ' for example I change

src: url('../fonts/FF6/final_fantasy_vi_snesb-webfont.eot');

to

src: url('C:/downloads/RPGTextboxGen-master\fonts\FF6final_fantasy_vi_snesb-webfont.eot');

because it doesnt work and i tried that
>>
>>51912521
Where do you keep your html?

If it's in C:/downloads/RPGTextboxGen-master\

Then you can use:

src: url('./fonts/FF6/final_fantasy_vi_snesb-webfont.eot');

the "./" in beginning refers to "current folder", the "../" in the original code refers to "one folder up and then..:". I imagine that would work, I havent coded in javascript before.
>>
>>51912657
Don't use the full path then, only use relative path like in the original code.
>>
File: cat.png (135 KB, 276x453) Image search: [Google]
cat.png
135 KB, 276x453
>>51912562
yes

that's the default so it should work as you download it excepet it doesn't...

also the bg image doesnt load, which is located at

bg.src = 'images/ff6_bg.png';

(line 89 in rpg-textbox-gen-0.1.js)

everything should load by default then but it doesnt
>>
>>51912675
Yes i deleted the message because i realize full path doesnt work, but, as you realize it should work by default but nothing loads.. what is going on ? strange.
>>
>>51911778
Screenshot.
>>
File: gento.png (99 KB, 480x206) Image search: [Google]
gento.png
99 KB, 480x206
>>51912722
>>
File: nice.jpg (7 KB, 300x168) Image search: [Google]
nice.jpg
7 KB, 300x168
>>51912675
Maybe its something to do in the index.html code? there are urls in here
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>
RPG Text Box Generator
</title>

<!-- Styleland -->
<link rel="stylesheet" type="text/css" href="styles/reset.css">
<link rel="stylesheet/less" type="text/css" href="styles/style.less">
<!-- /Styleland -->

<!-- Scriptland -->
<!-- [if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif-->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="scripts/less-1.3.0.min.js" type="text/javascript"></script>
<script src="scripts/rpg-textbox-gen-0.1.js" type="text/javascript"></script>
<!-- /Scriptland -->

</head>

<body>
<h1>RPG Text Box Generator</h1>
<canvas id="textbox" width="1135" height="340"></canvas>

<div id="content">
<p>
The RPG Text Box Generator is an HTML5 app that converts
what you type into a RPG-style text box. To try it out,
choose a style and type in some text below!
</p>

<form>
<table>
<tr>
<td>
<label for="rpgStyle">Type:</label>
</td>
<td>
<select id="rpgStyle" name="rpgStyle">
<option value="ff6">Final Fantasy 6 Basic</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="characterName">Character Name:</label>
</td>
<td>
<input type="text" id="characterName" name="characterName"></input>
</td>
</tr>
<tr>
<td>
<label for="dialogText">Dialog Text:</label>
</td>
<td>
<textarea id="dialogText" name="dialogText"></textarea><br />
</td>
</tr>
</table>


</form>
</div>

</body>

</html>
>>
File: cat6.gif (965 KB, 450x253) Image search: [Google]
cat6.gif
965 KB, 450x253
this actually quite upsets me, i cant find a way!
>>
any javascripters in here? why are the things not loading?
>>
File: cat6434.gif (1 MB, 480x284) Image search: [Google]
cat6434.gif
1 MB, 480x284
please heeelp
>>
>>51914923
I downloaded the font and the bg image, and then edited the javascript and html files to use local file references instead of requesting files from the website

https://www.dropbox.com/sh/ixlyjrt2p6geptn/AAChJs4cPtTmmblyXXroxxZEa?dl=0
>>
>>51915025
>https://www.dropbox.com/sh/ixlyjrt2p6geptn/AAChJs4cPtTmmblyXXroxxZEa?dl=0
thanks

where do you reference final_fantasy_vi_snesb-webfont.woff tho?

also why did you delete the other font files? why woff and not the tlf files which are font files?
>>
>>51915083
ok i see its referenced in the html file

i still don't understand why you use the woff file, why are the other fiels not necessary?

if I want to use a custom file that is a tlf file, do I just replace the .woff file with the .tlf file I watn to use in the html and it will work?
>>
>>51911753
This guy is sick* or These guys are sick*.
>>
>>51915151
I just downloaded the .woff because I was looking at the resources/fonts, and that's the only one that showed up in the html inspector. So I replaced that one in the html and that seemed to work.

For a custom font, you would probably replace the one in the html, plus change a line in the javascript file
context.font = "116px FinalFantasyVISNESbRegular"



By the way, I don't really know what I'm doing. I've never really used much javascript before, so I'm just trying things to see what will work.
>>
>>51915233
I ended up testing it out with a different font, and it sort of works (don't even need to change the javascript). The only thing is, the spacing is fucked up
>>
>>51915355
its unfortunate that i am not english speaker because otherwise this would be perfect as it is but the font used by default doesnt make special characters
>>
>>51915395
If you just put your font file in the folder, and then rename the font file in the @font-face part of the html header, it should work.

If it's too big or the spacing is fucked up, open the js file and edit the 116px to a different number
>>
>>51915501
ko will try
Thread replies: 29
Thread images: 7

banner
banner
[Boards: 3 / a / aco / adv / an / asp / b / biz / c / cgl / ck / cm / co / d / diy / e / fa / fit / g / gd / gif / h / hc / his / hm / hr / i / ic / int / jp / k / lgbt / lit / m / mlp / mu / n / news / o / out / p / po / pol / qa / r / r9k / s / s4s / sci / soc / sp / t / tg / toy / trash / trv / tv / u / v / vg / vp / vr / w / wg / wsg / wsr / x / y] [Home]

All trademarks and copyrights on this page are owned by their respective parties. Images uploaded are the responsibility of the Poster. Comments are owned by the Poster.
If a post contains personal/copyrighted/illegal content you can contact me at [email protected] with that post and thread number and it will be removed as soon as possible.
DMCA Content Takedown via dmca.com
All images are hosted on imgur.com, send takedown notices to them.
This is a 4chan archive - all of the content originated from them. If you need IP information for a Poster - you need to contact them. This website shows only archived content.