If you’re looking to add a little magic to your projects with the enchanting symbols from Magic: The Gathering, welcome to Keyrune! This blog will guide you through the process of incorporating this unique font into your applications, websites, and documents.

What is Keyrune?

Keyrune is the first suite of complete Magic: the Gathering expansion and set symbols as a pictographic font. Essentially, it’s like a treasure chest full of magical symbols, ready for you to sprinkle throughout your creative projects!

Getting Started: Usage Instructions

• Character Representation: Each set symbol in Keyrune has its own font character, much like emoji. To display them, you will use the i class="ss ss-expi" element. The class codes are based on the expansion codes from MTG JSON.
• Including Keyrune: You have several options for using Keyrune:
  • Via Source, NPM, or Bower: Move the font files to your fonts directory and include the following stylesheet in your HTML head:

  <link href="css/keyrune.css" rel="stylesheet" type="text/css">

  • Via CDN: You can now also use Keyrune from a CDN, which simplifies the process. Include this link in your HTML head:

  <link href="https://cdn.jsdelivr.net/npm/keyrune@latest/css/keyrune.css" rel="stylesheet" type="text/css">

• Font-Family Inclusion: As of version 3.1.1, you no longer have to include the font-family via @font-face explicitly. However, if you’d like to do so, here’s a quick reminder of the CSS ruleset:

@font-face {  
  font-family: Keyrune;  
  src: url('https://cdn.jsdelivr.net/npm/keyrune@latest/fonts/keyrune.eot');  
  src: url('https://cdn.jsdelivr.net/npm/keyrune@latest/fonts/keyrune.eot?#iefix') format('embedded-opentype'),  
       url('https://cdn.jsdelivr.net/npm/keyrune@latest/fonts/keyrune.woff2') format('woff2'),  
       url('https://cdn.jsdelivr.net/npm/keyrune@latest/fonts/keyrune.woff') format('woff'),  
       url('https://cdn.jsdelivr.net/npm/keyrune@latest/fonts/keyrune.ttf') format('truetype'),  
       url('https://cdn.jsdelivr.net/npm/keyrune@latest/fonts/keyrune.svg') format('svg');  
  font-weight: normal;  
  font-style: normal;}

How to Use Keyrune on Your Desktop

To copy Keyrune symbols into your desktop application, visit the Cheatsheet on the documentation site. Simply copy the character and paste it into your application after installing keyrune.ttf. If you need detailed instructions or a sample Word document, feel free to check the documentation page for more guidance!

Troubleshooting Tips

If you encounter any hiccups along the way, here are some solutions:

• Missing Symbols: Make sure you’ve included the Keyrune CSS file correctly in your project. Double-check the path and make sure it’s accessible.
• Symbols Not Displaying: Confirm that the character codes you are using match the correct expansion codes.
• Compatibility Issues: Ensure that your desktop software supports custom fonts and check that you have installed the font correctly.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Final Thoughts

Editing source files and compiling Keyrune to fit your project’s needs is entirely permissible! Support for BOTH LESS and Sass makes it flexible for customization.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Now go ahead and weave some magic into your projects using Keyrune!