Font Info Viewer

The Font Info Viewer Tool is a web application that allows you to preview text with different font styles and instantly see the corresponding CSS font properties. This tool is useful for web designers and developers who want to quickly test and understand how various font settings will appear and what CSS code is needed to achieve them. Here's how it works: Enter Text: Type or paste any text into the "Enter Text" area. This text will be used for the live preview. Font Family: Select a font family from the dropdown list. The preview text will immediately update to show the selected font. Font Size (px): Adjust the font size in pixels using the number input field. The text preview will dynamically change its size. Font Weight: Choose a font weight (e.g., Normal, Bold, Thin, Black) from the dropdown. The preview text's boldness will adjust accordingly. Apply Styles & Show Info Button: Click this button to apply all the selected font styles to the "Text Preview" area and to display the exact CSS properties (font-family, font-size, font-weight) in the "Applied Font Info (CSS)" section. Text Preview: This area shows your entered text with the applied font styles, giving you a visual representation. Applied Font Info (CSS): This section provides the CSS code snippet that corresponds to the font styles you've selected and applied, which you can then use in your own projects. Error Messages: If you leave the text input empty, the tool will display a message prompting you to enter some text. This Canvas provides an interactive way to experiment with typography and understand the CSS behind different font appearances.