Online Font Style Generator

Create and export beautiful text styles with live previews and CSS generation.

Your Text

Controls

Font Family

Font Size (32px)

Font Weight

Font Color

Shadow Color

Shadow X (2px)

Shadow Y (2px)

Export & Generated Code

Live Preview

Generated CSS

Generated on: ${new Date().toLocaleDateString()}

Live Preview

${textInput.value.replace(/\n/g, '
')}

CSS Properties

font-family	'${styleState.fontFamily}', serif;
font-size	${styleState.fontSize};
font-weight	${styleState.fontWeight};
color	${styleState.fontColor};
text-shadow	${styleState.textShadow};

`; const pdfTemplate = document.getElementById('pdf-template'); pdfTemplate.innerHTML = reportHtml; pdfTemplate.classList.remove('invisible'); try { const { jsPDF } = window.jspdf; const canvas = await html2canvas(pdfTemplate.querySelector('.pdf-report-container'), { scale: 2 }); const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF({ orientation: 'p', unit: 'pt', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(), pdfHeight = (canvas.height * pdfWidth) / canvas.width; pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight); pdf.save('FontStyle_Report.pdf'); } catch (e) { console.error('PDF Generation Error:', e); } finally { downloadPdfBtn.disabled = false; downloadPdfBtn.textContent = 'Download Style PDF'; pdfTemplate.classList.add('invisible'); pdfTemplate.innerHTML = ''; } } downloadPdfBtn.addEventListener('click', generatePdfReport); // --- START --- initialize(); });