diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/factors_that_influence_the_efficiency_of_variable_web_fonts/lesson.textproto b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/factors_that_influence_the_efficiency_of_variable_web_fonts/lesson.textproto index e769cd52741..c4829f5435c 100644 --- a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/factors_that_influence_the_efficiency_of_variable_web_fonts/lesson.textproto +++ b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/factors_that_influence_the_efficiency_of_variable_web_fonts/lesson.textproto @@ -5,4 +5,5 @@ reviewers: "Piper Haywood" topics: "variable_fonts" related_terms: "variable_fonts" prev_lessons: "interactive_animations_with_variable_fonts" +next_lessons: "problems_with_variable_fonts" excerpt: "Which specific font qualities make the biggest impact on efficiency?" diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/problems_with_variable_fonts/content.md b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/problems_with_variable_fonts/content.md new file mode 100644 index 00000000000..aa63aa7a354 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/problems_with_variable_fonts/content.md @@ -0,0 +1,48 @@ +## Variable fonts are not supported at all + +Variable font was introduced to the web in 2016, but some applications still do not offer any support for them. + +To help with this situation, Google Fonts offers download ZIPs for each variable font family that include a set of commonly used static fonts. +But it is common that you will want to use a specific style that was not included. + +There are several tools available to convert such an 'instance' into a static font, that will work everywhere: + +* [Dinamo Font Gauntlet](https://fontgauntlet.com) +* [Slice](https://slice-gui.netlify.app) + +## Glyph outline overlaps causing holes + +When variable fonts are supported, the most common technical problem encountered is with glyph outline contours that overlap. +When it occurs, the problem looks something like this: + +
+ +![A 3D graphics editor screenshot, showing variable font glyphs B, P, R, e, and 4 with contour overlaps that are not correctly processed.](images/1.png) + +
A variable font with glyphs B, P, R, e, and 4 that have contour overlaps, rendered in a 3D graphics editor incorrectly with holes.
+ +
+ +Here the glyphs in a 3D animation tool have contour overlaps, but they are rendered incorrectly, causing unwanted holes in the letterforms. + +Sadly, this is not a problem with the font, but with the application. +These overlaps are intrinsic to how variable fonts vary, and can not be removed from the font itself. +Many apps only offer the most basic support for variable fonts, and are not fully tested across all of their features by the developer. + +This situation began in the early 1980s, when Adobe released its first font format. +At that time, Adobe specified that glyph outlines should not have contour overlaps. +Over time, many apps have been built with an assumption that such overlaps do not occur. +These apps offers text styling features, which add shadow, strokes, fills, and other treatments to text by processing the glyph outlines. +But when the overlaps are present, these processes give really weird output. + +Fortunately, in all these apps, the workaround is always the same: + +**Apply a "Boolean union" function to remove the overlaps.** + +A Google search for ["boolean shape union APPNAME"](https://www.google.com/search?q=boolean+shape+union) should pull up the specifics for any app. + +A first preparatory step may also be needed, to ["convert text to outlines"](https://www.google.com/search?q=%22convert+text+to+outlines%22). + +Applying a union operation often means turning "live text" into a "dead graphic", so that the text with a font choice to render the text with the font's glyphs, is converted to a set of graphic objects; the original text is lost, so editing the text requires recreating the graphic objects. + +3D and motion apps tends to have "node" or "pipeline" structured editing environments, where the union operation can be applied to live text as part of a multi-step process that also sets the extrusion depth, shadow, and other treatments of the text. diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/problems_with_variable_fonts/images/1.png b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/problems_with_variable_fonts/images/1.png new file mode 100644 index 00000000000..c0745513aba Binary files /dev/null and b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/problems_with_variable_fonts/images/1.png differ diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/problems_with_variable_fonts/lesson.textproto b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/problems_with_variable_fonts/lesson.textproto new file mode 100644 index 00000000000..e094d2e7328 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/problems_with_variable_fonts/lesson.textproto @@ -0,0 +1,8 @@ +name: "Problems with variable fonts" +authors: "Dave Crossland" +reviewers: "Laurence Penney" +reviewers: "Elliot Jay Stocks" +topics: "variable_fonts" +related_terms: "variable_fonts" +prev_lessons: "factors_that_influence_the_efficiency_of_variable_web_fonts" +excerpt: "Variable fonts are still a relatively new technology, and users encounter common technical problems using them, that often have workarounds."