Skip to main content
Inspiring
December 17, 2020
Question

Text/Font Preview Function

  • December 17, 2020
  • 3 replies
  • 1079 views

Hi everybody,

 

I would like to incorporate a text preview function into a Dreamweaver site, the type you commonly see on sites like dafont.com. It allows you to type text into a text box, select from different fonts or variations of the same font, and view the changes in real-time.

 

Let’s say you print vinyl lettering on athletic jerseys. You could list the different fonts, and allow visitors to toggle between them to see what their lettering would look like based on the font they select, real-time.

 

Any idea on how to proceed with this? Thanks for any help you can provide.

 

Mark

This topic has been closed for replies.

3 replies

Legend
December 18, 2020

This totally depends how sophisticated you need the application to be. You could produce something fairly simple using some javascript but as Jon has already mentioned in his post, first you need to determine where you are sourcing your fonts from and in what format, because they need to be available to your users as well, so they can see them on their computer.

 

Probably the best workflow would be using @11220649-face as I think there is likely to be more choice of 'interesting' fonts  but of course you will need to make sure they are free to use.  These come as .woff, .ttf and .eot formats, which you store on your server and call them into a css stylesheet/s. Another option is you could use Google fonts, if the typeface you want is available, you could then just import the url for that typeface into your stylesheet/s.

 

You can use javascript to change the css stylesheet/s so the correct font is delivered, according to what the user chooses via a select list on the page.

Inspiring
December 21, 2020

Hi Osgood. Thanks for your help. I don't need it to be very sophisticated, just functional. If I could load a dozen or so fonts, either using @11220649-face or Google Fonts, and allow the visitor to toggle between them using a simple drop-down menu that would suffice. It would allow them to type their name and see the results real-time, and that's all I'm looking to do. The only challenging part would be to prepare the javascript so that the appropriate stylesheet would be called.

Legend
December 21, 2020

Hi Fun,

 

I'll provide you with the basic unstyled workflow (no css styling) - I assume you can apply that?

 

Below (scroll down) is the html code for the text input, the select list and a <div> with the class of 'fontStyle', where the text will be 'printed' AFTER a typeface has been selected from the list.

 

Where it says value="fonts/nameOfFont.css" - nameOfFont.css are seperate css stylesheets, 1 for each typeface. Name the css stylesheets with the name of the typeface NOT 'nameOfFonts' that is just some place-holder example text. Also store the css stylesheets in a folder named 'fonts' as can be seen in the value="fonts/nameOfFont.css"

 

Give the option tag text the 'Name of the Font', so the user can see the name of the font they are selecting.

 

Now as to what goes in each of your font css stylesheets. Assuming you have found some appropriate Google Fonts, choose the 'import' option to access the Google fonts in your webpage and paste the import link in your css stylesheet. Below is the import option url to a font named Taviraj from the Google Fonts website

 

@1552174 url('https://fonts.googleapis.com/css2?family=Taviraj:wght@500&display=swap');

 

Right after the above paste the below in your css stylesheet, this will target the 'fontStyle' div into which the typeface option, chosen from the select option, will be 'printed'.

 

.fontStyle {
font-family: 'Taviraj', serif;
}

 

Repeat the steps for each typface, creating individual css stylesheets for each one.

 

 

Html code:

<div class="wrapper">
<p>
<label for="inputText">1. Type in some text</label><br>
<input class="inputText" id="inputText" type="text">
</p>

<p>
<label for="selectFont">2. Select Font</label><br>
<select id="selectFont" class="selectFont" onchange="changeFont(this.value)">
<option value="fonts/nameOfFont.css" selected>Name of the Font </option>
<option value="fonts/nameOfFont.css">Name of the Font</option>
<option value="fonts/nameOfFont.css">Name of the Font</option>
<option value="fonts/nameOfFont.css">Name of the Font</option>
</select>
</p>

<div class="fontStyle"></div>

</div>
<!-- end wrapper -->

 

 

Next add a stylesheet link to the page, to handle the swapping of the fonts/stylesheets - I'm assuming you know how to add a basic stylesheet link to the page?

 

Give it an id of 'selectCss' as the example link below and make the href link the link to your css stylesheet, in the fonts folder, which is associated with the first font in the select option list:

 

<link id="selectCss" href="fonts/nameOfFont.css" rel="stylesheet" type="text/css">

 

Lastly add the javascript below to the end of your page, directly before the closing </body> tag:

 

<script>
// get association to the text field with the class 'inputText'
const inputText = document.querySelector('.inputText');
//create a function for when the select list changes
function changeFont(fontSelected) {
// get association to the <div> with the class 'fontStyle'
const fontStyle = document.querySelector('.fontStyle');
// print the value of the 'inputText' field to the div with the class 'fontStyle'
fontStyle.innerHTML = `<h2>${inputText.value}</h2>`;
// get association to css stylesheet with the id 'selectCss' and set its href link to the value of the select option field selected
document.getElementById("selectCss").setAttribute("href", fontSelected);
}
</script>

 

That should be it!

Nancy OShea
Community Expert
Community Expert
December 17, 2020

Online design sites like Custom Ink and Vistaprint have invested big bucks into their custom software.

https://www.iscripts.com/printlogic/

 

Nancy O'Shea— Product User & Community Expert
Inspiring
December 21, 2020

Hi Nancy, thanks so much for the link and help. At the moment, Iscripts is more robust than what I need. I'm really focused on just this particular feature and not constructing a complete site, but it's great to know this option exists.

Jon Fritz
Community Expert
Community Expert
December 17, 2020

You could upload fonts to your server, then use the CSS @11220649-face rule to pull them into your page and allow people without those fonts installed to see them. Then it's a matter of finding/writing a javascript that will change the display of the font-family in a text field based on a form <select>.
 
I don't know of anything pre-written for this (definitely nothing built into DW for it), but it shouldn't be a terribly difficult script to piece together if you know how to work with javascript.

Inspiring
December 21, 2020

Thanks Jon. That's more or less what I was thinking. I would need to have the script written because I have no experience with javascript.