Help
Purchasing
You may purchase Michael Rafailyk's fonts from the following markets:
MyFonts
I Love Typography
Fontspring
Creative Market
YouWorkForThem
Rentafont
Font Bros
Alternatively, you can support Michael Rafailyk by purchasing his fonts directly by sending a request to type@michaelrafailyk.com. In the request, please specify the name of the font family, which styles are required, and which licenses are required.
Licensing
When purchasing a font, you need to understand where you are going to use it. On a computer, on a website, in an application? How many people on your team are working on the project? How many visitors per month visit the project website? These questions will help you determine which license you need.
The most common licenses are Desktop and Webfont, but there are also App, ePub, Server, Digital Ads, and Custom licenses. A Desktop license applies to everything you create on a computer using a font and/or publish as an image. This one is the most popular and depends on the number of users working with the font. A Webfont license is required to use the font on the website. It is based on page views per month.
Which one to choose? For example, you have a team of 4 designers working on a brand. To promote it on the web, you also create a website. At the moment you need a Desktop license for 4 users for your team and also a Webfont license. If your client plans to create content on his own using a font, he needs another one desktop license.
The End User License Agreement may differ from market to market. If you purchase fonts directly from Michael Rafailyk, you can review the terms of use on the license page. If you purchase fonts from font markets, please read the EULA on that market website.
Exclusivity
By purchasing typefaces from retail font markets, you get a non-exclusive right to use them. In other words, a font can be purchased by anyone and used in a variety of projects.
Full exclusivity gives you a perpetual right to use the typeface. No one but you can purchase and use this typeface. This usually involves developing the custom fonts or creating modified versions of existing fonts.
Temporary exclusivity give you the right to exclusively use the typeface for a limited period, for example for a few years. After that, if the license is not renewed, the typeface can be published on retail stores and will be available to anyone.
Language support
All font families from Michael Rafailyk cover Latin, Cyrillic, and Greek scripts. Many of them also cover Arabic, Hebrew, and Georgian scripts and support up to 500+ languages. A list of all supported languages is available on the specific typeface page.
OpenType features
OpenType improves typography. Its features make the font smart and give you a flexible approach to text formatting. Most of these features, such as ligatures or contextual alternates, are enabled by default, while some, such as fractions of stylistic sets, are inactive by default and can be activated manually.
How to apply OpenType features? In graphics editors from Adobe, this features could be enabled or disabled on the OpenType panel and some on the Character panel. On the web, OpenType features are controlled by CSS. For example, the following CSS code for the header elements enables Stylistic Set 1 and Small Capitals, and disables Standard Ligatures.
h1 {
font-feature-settings: "ss01" 1, "smcp" 1, "liga" 0;
}
Webfonts
To use purchased webfonts on the website, you need to follow three steps: 1. Place the font files on server. 2. Include it to CSS. 3. Apply it to html elements. If you work with just one font, your CSS may looks like this:
@font-face {
font-family: "Family Name";
src: url("FamilyName-Regular.woff");
}
h1, h2 {
font-family: "Family Name";
}
However, if you work with at least two styles of the same font family, there are two approaches for including them in CSS: Separated Styles and Linked Styles. It's up to you which approach to take, both of them are valid. Let's include the font family with 4 styles (Light, Regular, Italic, Bold) using these two approaches.
1. Place the font files in woff or woff2 format on the server, for example in the directory called fonts.
Separated Styles approach for steps 2 and 3
With this approach you need to specify every font with a unique family name. It is easier to use because all you need is to add the style name to the family name, and you don't need to specify the additional weight and style parameters every time.
2. Include the fonts into the CSS using @font-face rule, specifying unique font family name (that include the style name) for each style, and specifying the path to the font file.
@font-face {
font-family: "Family Name Light";
src: url("fonts/FamilyName-Light.woff");
}
@font-face {
font-family: "Family Name Regular";
src: url("fonts/FamilyName-Regular.woff");
}
@font-face {
font-family: "Family Name Italic";
src: url("fonts/FamilyName-Italic.woff");
}
@font-face {
font-family: "Family Name Bold";
src: url("fonts/FamilyName-Bold.woff");
}
3. Apply the font styles to html elements or classes, specifying only unique font family name (that include the style name).
.light {
font-family: "Family Name Light";
}
p {
font-family: "Family Name Regular";
}
i {
font-family: "Family Name Italic";
}
b, h1, h2, h3 {
font-family: "Family Name Bold";
}
Linked Styles approach for steps 2 and 3
With this approach you always use the same family name between different font styles, just like you used to do this in any text/graphic editor. However, for every style you need to set up two additional parameters called font-weight and font-style.
2. Include the fonts into the CSS using @font-face rule, specifying:
– Font family name (in double quotes if the family name contains spaces).
– Path to the font file (relative to the CSS file), and full name of the font file (including its format).
– Font weight (normal or bold, or the number where 100 is Thin, 200 is Extra Light, 300 is Light, 400 is Regular, 500 is Medium, 600 is Semi Bold, 700 is Bold, 800 is Extra Bold, 900 is Black).
– Font style (normal or italic).
@font-face {
font-family: "Family Name";
src: url("fonts/FamilyName-Light.woff");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "Family Name";
src: url("fonts/FamilyName-Regular.woff");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Family Name";
src: url("fonts/FamilyName-Italic.woff");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "Family Name";
src: url("fonts/FamilyName-Bold.woff");
font-weight: bold;
font-style: normal;
}
3. Apply the font styles to html elements or classes, and specify the weight and style values for every style.
.light {
font-family: "Family Name";
font-weight: 300;
font-style: normal;
}
p {
font-family: "Family Name";
font-weight: normal;
font-style: normal;
}
i {
font-family: "Family Name";
font-weight: normal;
font-style: italic;
}
b, h1, h2, h3 {
font-family: "Family Name";
font-weight: bold;
font-style: normal;
}
Remove faux bold effect from headers
By default, all the browsers add extra boldness to the headers (and for everything that is considered bold), making a Regular looks like a Bold and a Bold like a Black, so the headers like h1 h2 h3 appear too dark by default. You can prevents that behavior by adding the following rule to the root element (it will be applied to html or body).
:root {
font-synthesis: none;
}
Variable fonts
Many of font families from Michael Rafailyk include a variable font version. What is it and what are its advantages? It is a single font file that may include all the styles in a family and any variations in between. Watch the video with variable font in action. Looking for some special weight between Regular and Bold? Variable font lets you use a sliders (axes) to create a new font style. It could be a Weight axis between Light and Black, a Width axis between Condensed and Extended, an Optical Size axis, and others. You can use them separately or together, and, for example, create some new unique style between Regular, Bold, Condensed, and Extended. The price of a variable font is often lower than the price of a complete font family pack and you get significantly more than all the individual styles. Also, on the web, you can animate the variable font.
How to use the variable font features? In graphics editors from Adobe: Make sure that your text is selected. The Variable Font button will appear near the Font Style list on the Character panel. Click it to open the sliders.
On the web, variations are accessed through CSS. Read this guide for details. To set the exact parameters for each axis, you need to know their ranges which are described in Features section on the typeface homepage. To avoid incorrect display in some browsers, always specify all available axes in the font. Here's an example of using a variable font with Weight, Contrast, X-Height axes.
h1 {
font-variation-settings: "wght" 400, "CNTR" 100, "XHGT" 80;
}
Read more about variable fonts for brands and check out the list of applications and operating systems that support variable fonts to be sure it fits your project.
Color fonts
Color fonts may contain solid colors, gradients, textures, transparent elements and so on. It's the same font files in OTF or TTF format we know, but with additional tables that keep the color information. You can install and use them the same way as normal fonts.
Application support. Color fonts are represented in two versions – with COLR table or SVG table. COLR version is needed for all the web browsers and most of the desktop applications. SVG version is needed for InDesign, After Effects, Premiere Pro, Inkscape, CorelDRAW. Figma doesn’t support color fonts yet (checked in 2025). Please check the full list of color fonts support.
Advantages and disadvantages. Color fonts let you immediately achieve a specific text effect like 3D, textured, brushed, gradiented text, so on. Also, they can contain an emojis and pictograms. However, you can't directly change the text color in a graphic editor as you usually do.
Changing colors. You can change the color palette to your liking to better match the colors of your project. In the web browsers you can do it directly, by adding CSS rule to override default colors:
@font-palette-values --AlternateColors {
Desktop applications do not yet allow you to change the color palette directly. However, there are a few more non-direct ways to change the color palette in applications. In Illustrator – by converting text to outlines and then using Recolor Arkwork feature. In Photoshop – by using Blending Options on Layers panel.
font-family: "Font Family Name";
override-colors: 0 #FF5078, 1 #00B482;
}
p {
font-family: "Font Family Name";
font-palette: --AlternateColors;
}
Troubleshooting
Got questions about using font families or its features? Is one of fonts from Michael Rafailyk not working as expected? Not sure which license to choose? Want to expand language support? Need a custom font? Feel free to send an email at type@michaelrafailyk.com to resolve your issue.