Embed CSS Fonts in CorelDRAW SVG Exports

Exporting Scalable Vector Graphics (SVG) with custom typography from CorelDRAW often leads to missing fonts or distorted layouts when viewed across different devices. This guide covers how to preserve your typography by embedding CSS fonts directly inside your CorelDRAW SVG exports. You will learn how to configure CorelDRAW's native export settings to output CSS styling and how to embed Base64 web fonts into the file's code to guarantee consistent rendering without converting text to static curves.

1. Configure CorelDRAW SVG Export Settings

CorelDRAW provides built-in options to format SVG styling using CSS rather than presentation attributes. To prepare your file:

  1. Select your artwork and navigate to File > Export (Ctrl + E).
  2. Set the file format to SVG - Scalable Vector Graphics and click Export.
  3. In the SVG Export dialog box, open the General and Text options.
  4. Under the Text section, select Export text as: Text (do not select "Curves" if you want editable, scalable text elements).
  5. Look for font options and select Embed fonts in file if supported by your version of CorelDRAW.
  6. Under styling options, ensure that styling is set to Internal CSS or Inline CSS rather than presentation attributes.
  7. Click OK to save the file.

While CorelDRAW can export text elements, it frequently references local font family names rather than packaging the complete web font data inside the file. To ensure the SVG renders identically on devices without the local font installed, embed the font directly as a Base64-encoded CSS @font-face block.

Convert Your Font to Base64

  1. Obtain the Web Open Font Format (WOFF or WOFF2) file for the typeface used in your design.
  2. Use an online font converter or a command-line tool to encode the font file into a Base64 string.

Insert the CSS into the SVG File

  1. Open your exported SVG file in a code or text editor (such as VS Code or Notepad++).
  2. Locate the <svg> opening tag. Immediately below it, ensure there is a <defs> block. If absent, create one:
<defs>
  <style type="text/css">
    @font-face {
      font-family: 'YourFontName';
      src: url('data:font/woff2;charset=utf-8;base64,PASTE_BASE64_STRING_HERE') format('woff2');
      font-weight: normal;
      font-style: normal;
    }
  </style>
</defs>
  1. Replace 'YourFontName' with the exact font family name CorelDRAW assigned to your text elements (inspect the <text> or <tspan> tags in the file to confirm the name used in class or font-family attributes).
  2. Paste your raw Base64 data string in place of PASTE_BASE64_STRING_HERE.
  3. Save the SVG file.

3. Alternative: Linking External Web Fonts via CSS

If keeping the SVG file size minimal is a priority over making it completely self-contained, you can import an external CSS web font:

  1. Open the exported SVG file in a text editor.
  2. Inside the <defs><style> section, add a standard @import rule pointing to a web font host like Google Fonts:
<defs>
  <style type="text/css">
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&amp;display=swap');
  </style>
</defs>
  1. Verify that the font name in the @import URL matches the font-family applied to the SVG text tags. Note that this method requires an active internet connection on the client's device to load typography properly.