![]() ![]() As support evolves, the newer syntax will take over without compromising support for older browsers. The second ( woff2-variations) is the currently supported syntax in all supporting browsers. The first syntax ( woff2 supports variations) is the more modern of the two, since there will also be color fonts, so there needs to be a way to indicate combinations of features. Because the CSS specification is evolving, including both format hints guarantees it will work now and in the future, once the full specification is supported in browsers. So the first part you’ll notice is the source. The code example shows how the rules would look in your CSS. While there have been several iterations of the specification, these examples will show the most current and complete implementation to ensure the broadest compatibility. ![]() Hosting variable fonts on your site is not much different than hosting standard ones, but there are a few key parts that must be included in order for them to work best. The third example is a request for the full weight range of the variable font. The second example includes the wght keyword with a specific weight listed after the sign, indicating a static instance from the variable font. Although in some cases it may be useful to request, say, only the 575 weight of a given typeface, the real benefits of using variable fonts often lie in using more of the available range, which is why that’s the focus of most of the demos on this site.Ĭrimson Pro, variable, specific Pro, variable, full weight first example above is closest to the syntax previously supported in the API. In other words, the same URL structure can retrieve the static fonts, a variable font range, or a variable font instance at a single specific value. This version of the API can serve both static and variable fonts-and indeed static instances of variable fonts. If you only require the weight to cover part of the available range, you can adjust the values accordingly and end up with a slightly smaller download. The API allows for individual values to be specified, but here the request uses the “.” syntax to request the full weight range of 200 to 700. This is where the axis or axes are listed, followed by an symbol, followed by values indicating the ranges requested. It’s after the colon that things change more dramatically. Requesting Yanone Kaffeesatz as a variable font with a weight axis range of 200–700 looks like break down the parts of the request:Ĭss2?family=.įirst, note that while the address endpoint is css2, specifying the font name is relatively unchanged from the previous version of the API. After selecting a variable font to use via the API, pay special attention to the changes in syntax from v1 to v2. ![]()
0 Comments
Leave a Reply. |