PHP solution for automated font embedding across browsers

Backend
1

I’m working on a print product website where designers upload custom fonts for templates. We need to show real-time previews of editable text regions using these fonts. The problem is browser compatibility.

Most modern browsers support @font-face with TTF files. But Internet Explorer needs EOT format. Here’s what I’m trying to figure out:

  1. Can we convert TTF to EOT on the server? Our host isn’t Windows-based.
  2. How do we automate this process for each uploaded font?
  3. What’s the best way to serve the right format to each browser?

We can’t use Flash or JavaScript tricks because the text is in editable form fields. Any ideas on how to make this work across all browsers automatically?

// Pseudocode example
function handleFontUpload($fontFile) {
    $eotVersion = convertFontToEOT($fontFile);
    $cssSnippet = createFontFaceCSS($fontFile, $eotVersion);
    storeCSSInDB($cssSnippet);
}

// How to implement convertFontToEOT on non-Windows servers remains a challenge.

Has anyone tackled this cross-browser font embedding challenge before?

2

hey, have u considered using a CDN for font hosting? services like Google Fonts or Adobe Fonts handle browser compatibility for you. they convert and serve fonts in optimal formats automatically. could save u tons of hassle! what do u think about outsourcing this part?

3

I’ve encountered similar challenges with font embedding across browsers. One approach that worked well for me was utilizing a font conversion service API like FontSquirrel’s Webfont Generator. You can integrate this into your upload process to automatically generate multiple font formats including EOT.

For serving the right format, I recommend using the CSS @font-face rule with multiple src declarations. This allows you to specify fallback options for different browsers:

@font-face {
  font-family: 'CustomFont';
  src: url('customfont.eot');
  src: url('customfont.eot?#iefix') format('embedded-opentype'),
       url('customfont.woff2') format('woff2'),
       url('customfont.woff') format('woff'),
       url('customfont.ttf') format('truetype');
}

This approach has provided consistent results across browsers in my experience.

4

hey there! i’ve dealt with this headache before. for EOT conversion, try using a php wrapper for ttf2eot (https://github.com/typoland/PHP-TTF-to-EOT). it works on linux servers too. then use php to dynamically serve the right format based on user-agent. good luck with ur project!