(Request) Font Preview Generator

Toje

Member
Sep 10, 2020
113
15
18
Hi


I search a script oder snippet for a font preview generator

Like this


Screenshot_20230101-164037_Samsung Internet.jpg Screenshot_20230101-164620_Samsung Internet.jpg
 

christoph

New member
May 8, 2022
6
2
3
Maybe for this you can try Chat GPT?


Here was my prompt:

create a php script that provides a font preview with size and color selection

To create a font preview with size and color selection using PHP, you will need to use the following steps:

  1. Create an HTML form that allows the user to select the font, size, and color. You can do this using form elements such as a <select> element for the font, <input type="range"> for the size, and <input type="color"> for the color.
  2. Add a textarea element to the form where the user can enter the text that they want to preview.
  3. Use PHP to process the form data when it is submitted. You can use the $_POST superglobal to access the form data.
  4. Use the font, size, and color form data to set the appropriate CSS styles on the text that the user entered in the textarea.
Here is an example of what the PHP script could look like:

Code:
<?php
if (isset($_POST['submit'])) {
  // Process form data
  $font = $_POST['font'];
  $size = $_POST['size'];
  $color = $_POST['color'];
  $text = $_POST['text'];

  // Set the CSS styles
  echo "<style>";
  echo "body { font-family: '$font'; font-size: {$size}px; color: $color; }";
  echo "</style>";

  // Output the text
  echo $text;
} else {
  // Display the form
  ?>
  <form method="post">
    <label for="font">Font:</label>
    <select name="font" id="font">
      <option value="Arial">Arial</option>
      <option value="Helvetica">Helvetica</option>
      <option value="Verdana">Verdana</option>
      <option value="Tahoma">Tahoma</option>
      <option value="Georgia">Georgia</option>
      <option value="Times New Roman">Times New Roman</option>
    </select>
    <br>
    <label for="size">Size:</label>
    <input type="range" name="size" id="size" min="10" max="72" value="16">
    <br>
    <label for="color">Color:</label>
    <input type="color" name="color" id="color" value="#000000">
    <br>
    <label for="text">Text:</label>
    <textarea name="text" id="text"></textarea>
    <br>
    <input type="submit" name="submit" value="Preview">
  </form>
  <?php
}
?>

This script will display an HTML form that allows the user to select the font, size, and color, and enter the text that they want to preview. When the form is submitted, the PHP script will process the form data and output the text with the selected font, size, and color.

Here is what the script looks like.


It does not seem to be working, I think wordpress is applying the default font styling instead of actual preview. You can try it yourself or try to tweak the prompt, this was literally my first attempt with almost zero effort.
 
  • Like
Reactions: Toje

Forum statistics

Threads
69,229
Messages
908,458
Members
237,124
Latest member
skull

About us

  • Our community has been around for many years and pride ourselves on offering unbiased, critical discussion among people of all different backgrounds. We are working every day to make sure our community is one of the best.

Quick Navigation

User Menu