Instructions for testing custom type design in your own enviroment

1. Preparation

Before you start the testing process, ensure you have the following:

• – The correct font files:
  • OTF Open Type Format for MacOs
  • TTF True Type Format for Windows
  • WOFF2 Web Open Font Format 2 for CSS
  • Variable Font in TTF for CSS and Figma, Adobe
  • Variable Font in TTF for Microsoft Office
• – Access to multiple operating systems (Windows, macOS, Linux)
• – Intended applications for testing (e.g., Microsoft Office, Adobe Creative Suite, web browsers)

2. Installation Instructions

• - Download the Font Files.
• - Ensure the font files are downloaded and accessible on your computer.
• - Depending on operating system, follow the next installation steps below.

Windows

• - Right-click on the font file.
• - Select “Install” from the context menu.
• - Alternatively, you can drag and drop the font file into the Fonts folder located in Control Panel > Appearance and Personalization > Fonts.

macOS

• - Double-click the font file.
• - In the preview window that appears, click “Install Font”.
• - The font will be automatically added to Font Book and available for use.
• - If your company has a dedicated or prefered font library application, make sure that is the application that you use.
• - If you use an iPad, you can download iFont to access the font in e.g. Affinity on your iPad.

Linux (Ubuntu)

• - Open the terminal.
• - Navigate to the directory containing the font files.
• - Run the command: `sudo mv [font file] /usr/share/fonts/truetype/`.
• - Update the font cache with: `fc-cache -f -v`.

3. Testing in desktop applications

Microsoft Office (Word, PowerPoint, Excel)

• 1. Open the Application
• - Open Word, PowerPoint, or Excel.
• 2. Apply the Font
• - Create a new document or open an existing one.
• - Select some text.
• - Choose the newly installed font from the font dropdown menu.
• - Ensure the font displays correctly and that all styles work as expected, according to RIBBI (Regular, Italic, Bold, Bold Italic).

Figma

• 1. Open the Application
• - Open a design file.
• 2. Apply the Font
• - Create a text block.
• - Write some text.
• - Choose the newly installed font in the Text palette in the Properties Panel.
• - Ensure the font displays correctly and that all styles (e.g., bold, italic) work as expected.
• - Ensure the font features displays correctly in the type settings in `… ` submenu in the Text palette.
• - If you use a variable font, ensure the font variable features are displaying correctly in `… ` submenu in the Text palette.

Adobe Creative Suite and Affinity

• 1. Open the Application
• - Open Adobe InDesign or Affinity Publisher etc.
• 2. Apply the Font
• - Create a new project or open an existing one.
• - Select the Text tool.
• - Choose the newly installed font from the font dropdown menu.
• - Check the appearance of the font in various sizes and styles.
• - Test special characters and ligatures for proper display.

4. Troubleshooting your desktop installation

• - Is the font is correctly installed? Open your font library application, remove any previous versions and reinstall the font.
• - Not seeing the latest version of the font? Find the font file in your Library and select the font file and click cmd+i to find detailed information on `creation date` of your font.
• - Allways restart your font library application, and restart your application before trying again.
• - Still having a problem? Try restarting your computer.
• - Still having a problem? Try to use the font in another application.

5. Testing Self-hosting web fonts on your Web site (Chrome, Firefox, Safari)

Webfonts are supported by all major browser platforms but not all in the same way.
Check the capabilites here.

1. Create a stylesheet and upload your webfont

• - Open the root folder for your website in your code editor.
• - Open or create a new CSS file inside the root folder.
• - Include your CSS stylesheet to your website inside your html/php.
` link rel="stylesheet" href="stylesheet.css" type="text/css" `
• - If you use SASS, then I encourage you to make a seperate file called font.scss to embed your web font.
• - Create a folder called `fonts` near the same directory as your CSS file and add your font file(s) to the folder.

2. Embed your webfont

• - Use the `@font-face` rule to embed your web font in yor stylesheet:
  @font-face { font-family: 'YourFontName'; src: url('path/to/fontfile.woff2') format('woff2');}

• Read more about implementing a variable font
• - Create a CSS class for any specific font attributes, e.g. such as weight:
  .wght300 { font-family: 'YourFontName'; weight: 300; }
• - Apply the CSS class to some text elements in your html/php file:
  class="wght300"

3. View in Browser

• - Open your html/php file in different web browsers (Chrome, Firefox, Safari).
• - Ensure the font displays correctly across all browsers.
• - Test responsiveness and appearance on various devices (desktop, tablet, mobile) with your developer tools.

4. Troubleshooting your font-face

• - If the font is not appearing in any browser, look in your developer tools to make sure the browser can find the file. Do some plumbing to make sure the link is working properly. If it is still an issue take a look at your .htaccess files.
• - If the font is not appearing in one of the browsers, e.g. Firfox, then doublecheck the capabilites here to make sure you have the correct format.

5. Allways protect your font

• - I recomment that you create a redirect in your .htaccess file that moves the visitor to another page, rather than a download. Read about htaccess at Mozilla Developer Network (MDN).

6. Additional Testing

• Character Map Open the Character Map application (Windows) or Font Book (macOS) to verify all glyphs and special characters are present and correctly rendered.
• Accessibility Check the font for legibility and accessibility by testing different text sizes and colors. Read about accessibility at Web Content Accessibility Guidelines (WCAG) 2.1.
• Printing Print a sample document with the new font to ensure it prints correctly and maintains its quality.

7. Feedback

After completing the tests, please provide feedback on any rendering issues or inconsistencies, problems encountered during installation or use, or suggestions for improvements. For more information about our agreement on font engineering and validation, please contact me carolina@laudon.se.