Inspiring

Question

Text/Font Preview Function

Forum|Forum|5 years ago
December 17, 2020
3 replies
1088 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.

O

osgood_

Legend

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.

F

Fun SeekerAuthor

Inspiring

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.

O

osgood_

Legend

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:

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

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;
}
})

Nancy OShea

Community Expert

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

F

Fun SeekerAuthor

Inspiring

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

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.

F

Fun SeekerAuthor

Inspiring

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.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded