The src refers directly to the font files, therefore if you place all of them on /media/fonts/roboto you should refer to them in your main.css like this:src: url('../fonts/roboto/Roboto-ThinItalic-webfont.eot');
TEMPORARILY add the cdn for the css to load the roboto fonts into index.html and let the page load.from google dev tools look at sources and expand the fonts.googleapis.com node and view the content of the css?family=Roboto:300,400,500&display=swap file and copy the content. Put this content in a css file in your assets directory.
Web designers and developers have different constraints than print designers,and an important one is the associated bandwidth costs of our designs. Thishas been a sticking point for richer typographic experiences, as they come ata cost. With traditional web fonts, each style used in our designs requiresusers to download a separate font file, which increases latency and pagerendering time. Only including the Regular and Bold styles, plus their italiccounterparts, can amount to 500 KB or more of font data. This is even beforewe have dealt with how the fonts are rendered, the fallback patterns we needto use, or undesirable side-effects such as FOIT andFOUT.
There are five registeredaxes,which control known, predictable features of the font: weight, width, opticalsize, slant and italics. Besides those, a font can contain custom axes. Thesecan control any design aspect of the font the type designer wishes: the size ofserifs, the length of swashes, the height of ascenders or the size of the dot onthe i.
The ital axis is intended for fonts that contain both a regular style, and anitalic style. The axis is meant to be an on/off switch: value 0 is off andwill show the regular style, value 1 will show the italics. Unlike other axes,there's no transition. A value of 0.5 won't give you "half italics".
Compared to Android's previous system font, the humanist sans-serif Droid, Roboto belongs to the neo-grotesque genre of sans-serif typefaces. It includes Thin, Light, Regular, Medium, Bold, and Black weights with matching oblique styles rather than true italics. It also includes condensed styles in Light, Regular and Bold, also with matching oblique designs.
The Font Bureau was commissioned by Google Fonts in 2016 with the purpose of showcasing what the new variable font technology could do with two new fonts: Decovar Alpha and Amstelvar Alpha. While the former showed how more than a dozen axes of stylistic variations can be used (and abused) for display typography, the latter showed how a similar number of axes. Amstelvar Alpha can be used to deliver unprecedented control and flexibility in text typography. In 2018, Google Fonts commissioned the Font Bureau to apply the parametric axes approach to Roboto, transforming it from a UI typeface to an extreme typography system that pairs with Amstelvar. At ATypI 2020, the presenters will introduce the first official releases of Amstelvar and Roboto Flex in roman and italic styles for Latin, and share a glimpse into the future with Greek and Cyrillic. Interview / Q&A: Amstelvar and Roboto Flex Q&A: Following their detailed discussion, Crossland and Berlow will offer a dedicated Q&A to further explore a presentation packed with both novel and advanced text typography techniques.
The design axes are always chosen by the creator of the font, and they differ from variable font to variable font. However, there are five registered axes that are standardized by the OpenType Font Variation specification: weight (wght), width (wdth), italic (ital), slant (slnt), and optical size (opsz). Besides these, font creators can register any custom axis that users can access with the font-variation-settings CSS property.
In variable font terms, it has 12 static font variations along two design axes: weight (wght) and italics (ital). On the other hand, the Roboto Variable Font includes three design axes: weight (wght), width (wdth), and slant (slnt).
Recursive is made to be a flexible type family for both websites and code, where its main purpose is to give developers and designers some fun & useful type to play with, combining fresh aesthetics with the latest in font tech.
As variable fonts can be trimmed more flexibility and efficiently in the future, the files served for given API requests will likely get smarter over time. So, for production sites, it may be best to request exactly the styles you need.
Where it gets interesting, however, is that you can also request variable axes. That allows you to retain a lot of design flexibility without changing your font requests every time you want to use a new style.
The Google Fonts API seeks to make fonts smaller by having users opt into only the styles and axes they want. But, to get the full benefits of variable fonts (more design flexibility in fewer files), you should use one or more axes. So, instead of requesting single styles with Recursive:wght@400;700, you can instead request that full range with Recursive:[email protected] (changing from the ; to .. to indicate a range), or even extending to the full Recursive weight range with Recursive:[email protected] (which adds very little file size, but a whole lot of extra design oomph).
356178063d