(Request) Font Preview Generator

[Toje]

Hi


I search a script oder snippet for a font preview generator

Like this

 

[CheshireAI]

Maybe for this you can try Chat GPT?

https://chat.openai.com/

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:

<?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.

Snippet Preview – WordPress Garden

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.

 

[Toje]

Thank you very much