Style linking is the usage of font-face declarations for multiple styles linked to the same font family name, as opposed to using a different family name for each font style.
This section will help you understand
What are web projects and digital ads?
Web Projects
Web projects are organizational tools for your library that provide access to the web font format of your fonts and allow you to group them together in one accessible place.
Click here, to learn more about web projects.
Digital ads
Like web projects, digital ads in Monotype Fonts are another grouping option for organizing your font library and preparing your web fonts for use in HTML5 advertisements (ads).
Click here, to learn more about digital ads.
What are the various methods for defining web fonts in CSS?
There are two ways to define web fonts in CSS:
Family-linked web font definitions, where descriptors within the font-face property are used to further detail which exact font style is to be used within a specific font family. This is the current industry standard.
Individual web font definitions, which involve separate font-face definitions for each individual web font in the family.
How do I style link an existing digital asset?
Log in to the Monotype Fonts web platform.
Click My Library and choose a digital asset from the left panel.
You’ll see the banner stating that Style Linking is now available on Monotype Fonts on the selected asset. This is because the asset uses the old approach to style linking.
Click the vertical ellipsis icon
and select Duplicate from the drop-down menu. The asset will get duplicated successfully.Note: The user must have edit or co-owner access to duplicate the digital assets.
This action creates a copy of the embed code for the linked style in new format, and displays a new banner This web project/digital ad follows style linking.
Click </> Embed Code to view the font style for that web project and copy all the CSS elements.
Note: We’ve improved tracking web font page views by switching to a lightweight JavaScript & CSS implementation. We recommend using this over the old CSS implementation for faster page load times and a smoother experience.
How is the embed code in the new style linking different from the old one?
Previously, the pageview tracking was implemented synchronously. We've now transitioned to a more efficient, lightweight JavaScript and CSS solution that tracks web font page views without compromising website speed. This change ensures faster load times and a smoother experience.
Users can continue with the older implementation, but those seeking improved performance can opt for the asynchronous JavaScript + CSS approach.
Old style linking
New style linking
How can an existing user best utilize the new asynchronous JavaScript + CSS approach?
Existing users will only have access to the old CSS embed code, as the latest implementation is exclusive to newly created web assets. However, you can still utilize the new approach by updating the web project – by adding or removing a font, subsetting or just duplicating it.