Text/Font Preview Function

Participant ,
Dec 17, 2020 Dec 17, 2020

Copy link to clipboard

Copied

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

TOPICS
Code , How to , Preview

Views

239

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 17, 2020 Dec 17, 2020

Copy link to clipboard

Copied

You could upload fonts to your server, then use the CSS @Font-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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Dec 21, 2020 Dec 21, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 17, 2020 Dec 17, 2020

Copy link to clipboard

Copied

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

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

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Dec 21, 2020 Dec 21, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 18, 2020 Dec 18, 2020

Copy link to clipboard

Copied

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 @Font-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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Dec 21, 2020 Dec 21, 2020

Copy link to clipboard

Copied

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 @Font-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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 21, 2020 Dec 21, 2020

Copy link to clipboard

Copied

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

 

@Import 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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Dec 24, 2020 Dec 24, 2020

Copy link to clipboard

Copied

Osgood,

 

Thanks so much for your help because this is way over my head. I shouldn't have any difficulties with the CSS, and will give it a try over the weekend.

 

Thanks again, and have a wonderful weekend.

 

Mark

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 24, 2020 Dec 24, 2020

Copy link to clipboard

Copied

No problem.

 

Give it a go and post back if you have any issues. We can add options like allowing a user to select a range of colours if needs be.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Dec 29, 2020 Dec 29, 2020

Copy link to clipboard

Copied

Hi Osgood,

 

I  hope you had a pleasant weekend.

 

The script works just fine. I styled the DIV where the text appears, and centered the text.

 

The only hiccup came when linking to the external style sheets. I gave each of them an id of 'selectCss' (there are five in total), but Dreamweaver red-flagged all but the first one because they didn't have unique names. So, I changed the id's to 'selectCss1', 'selectCss2', 'selectCss3', etc., and the issue resolved itself; there are no red flags anywhere. Was this the correct thing to do or is there a better way?

 

How difficult would it be to add a color function to the script? For example, if I wanted to give visitors the option to select from different color backgrounds and/or different font colors? It would allow clients to see what blue text on a yellow shirt would look like, or any other combination of colors. Just an idea. If it's too complicated then I can leave it the way it is, no problem.


A general question regarding scripts. Anytime I use a plug-in, the script it automatically/most often inserted inside the <head> tags, but there are times, as in this case, when it's recommended the script be added to the bottom of the page, just above the </body> tag. Is there are reason for this? Is one way better than the other? Just curious.

 

Thanks again for your help.

 

Kind regards,

 

Mark

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 29, 2020 Dec 29, 2020

Copy link to clipboard

Copied

The only hiccup came when linking to the external style sheets. I gave each of them an id of 'selectCss' (there are five in total), but Dreamweaver red-flagged all but the first one because they didn't have unique names. So, I changed the id's to 'selectCss1', 'selectCss2', 'selectCss3', etc., and the issue resolved itself; there are no red flags anywhere. Was this the correct thing to do or is there a better way?

 

You should only need just the 1 link to the stylesheet in your page, the javascript just changes the 'href' of the link to point to the correct css file:

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

 

 

How difficult would it be to add a color function to the script?

It wouldnt be too difficult. I'll see if I can come up with something and post it here.

 

 

A general question regarding scripts. Anytime I use a plug-in, the script it automatically/most often inserted inside the <head> tags, but there are times, as in this case, when it's recommended the script be added to the bottom of the page, just above the </body> tag. Is there are reason for this? Is one way better than the other? Just curious.

 

If you insert the javascript at the top of the page it will stop the other content following it from loading onto the page until the javascript has downloaded, which might not always be desired. If the javascript is inserted after all the other page content it will download last, without stopping the content which is prior to it from downloading. If you do insert the script at the top of the page you can add 'defer' to the script tag which means the browser won't download the script until the rest of the page content has loaded.

 

https://www.w3schools.com/tags/att_script_defer.asp 

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 29, 2020 Dec 29, 2020

Copy link to clipboard

Copied

LATEST

Adding font and background colors:

Add some visual color swatches rather than just adding a couple of dropdown select menus:

 

html code below (take note a 'data-color' attribute has been added to each color swatch. We will use this to get the correct color to show when the swatch is selected (clicked on).

 

 

 

<h4>Select a font color</h4>
<div class="fontColorsWrapper">
<div class="fontColor" data-color="#cc0000"></div>
<div class="fontColor" data-color="#800080"></div>
<div class="fontColor" data-color="#0066cc"></div>
<div class="fontColor" data-color="#4d9900"></div>
</div>

<h4>Select a background color</h4>
<div class="backgroundColorsWrapper">
<div class="backgroundColor" data-color="#a2f678"></div>
<div class="backgroundColor" data-color="#e679b0"></div>
<div class="backgroundColor" data-color="#a8640c"></div>
<div class="backgroundColor" data-color="#f20ff4"></div>
</div>

 

 

 

 

Css code for swatches, you can change the swatch colors to whatever color you like (Just make sure the css color swatches and the data-color attributes in the html code, posted above, correspond, are the same as each other).

 

 

 

/* FONT COLORS */
.fontColorsWrapper {
display: flex;
justify-content: center;
}
.fontColor {
width: 30px;
height: 30px;
margin: 0 5px;
}
.fontColor:nth-child(1) {
background-color: #cc0000;
}
.fontColor:nth-child(2) {
background-color: #800080;
}
.fontColor:nth-child(3) {
background-color: #0066cc;
}
.fontColor:nth-child(4) {
background-color: #4d9900;
}


/* BACKGROUND COLORS */
.backgroundColorsWrapper {
display: flex;
justify-content: center;
}
.backgroundColor {
width: 30px;
height: 30px;
margin: 0 5px;
}
.backgroundColor:nth-child(1) {
background-color: #a2f678;
}
.backgroundColor:nth-child(2) {
background-color: #e679b0;
}
.backgroundColor:nth-child(3) {
background-color: #a8640c;
}
.backgroundColor:nth-child(4) {
background-color: #f20ff4;
}

 

 

 

 

Javascript code (add it to the current script, directly before the closing </script> tag.

 

 

 

// FONT COLORS
const fontColor = document.querySelectorAll('.fontColor');

fontColor.forEach(function(fontColor) {
fontColor.onclick = function() {
selectedColor = this.getAttribute('data-color');
const fontStyle = document.querySelector('.fontStyle');
fontStyle.style.color = selectedColor;
}
})


// BACKGROUND COLORS
const backgroundColor = document.querySelectorAll('.backgroundColor');

backgroundColor.forEach(function(backgroundColor) {
backgroundColor.onclick = function() {
selectedColor = this.getAttribute('data-color');
const fontStyle = document.querySelector('.fontStyle');
fontStyle.style.backgroundColor = selectedColor;
}
})

 

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines