Proto.io's Font Manager is used to help you manage your project’s fonts. You will find it under the Project Dropdown. You can add Google fonts, Adobe Fonts (assuming you have an Adobe Creative Cloud account), or upload your own web fonts (.woff files). Your Project fonts will be accessible in the Font family drop-down menu, in the Properties Inspector.
In the Font Manager modal window, you can modify the Preview text, as well as its size to match your preferences.
Google Fonts
In this section, you can browse through hundreds of available fonts (seen on the left pane). You can filter by category (San-serif, Serif, Monospace, Handwriting, Display) or Language. You can also search by name. When you find a font you like you have the choice to see its various styles (by clicking >) and perhaps choose a particular style of that font family to add or simply select “Add all”, which will add the whole font family with all styles to your Project fonts.
Fonts you add are marked with a blue check mark ✔︎ next to their names.
You will be seeing all your project fonts in the right pane. If you want to remove a font family or a particular style, you can use the relevant action button upon hovering over the font you want. For better distinguishing the fonts in the Project fonts list, each type of font has a different color icon. The Google font icon is blue.
Adobe Fonts
Users who have Adobe Creative Cloud subscriptions can also take advantage of Adobe Fonts in Proto.io. First, connect Proto.io to your Adobe Creative Cloud account and then start adding the fonts you want to your Project fonts. All user roles with editing rights (i.e. owners, admins, and designers) have access to this feature. Note that if an Adobe font is used in a project, then all editors of that project can to use it.
You can filter by category (San-serif, Serif, Slab Serif, Script, Blackletter, Mono, Hand, Decorative) or Language. You can also search by name. When you find a font you like you have the choice to see its various styles (by clicking >) and perhaps choose a particular style of that font family to add or simply “Add all”, which will add the whole font family with all styles to your Project fonts.
Fonts you add are marked with a blue check mark ✔︎ next to their names.
You will be seeing all your Project fonts in the right pane. If you want to remove a font family or a particular style, you can use the relevant action button upon hovering over the font you want. You'll need to be connected to Adobe Creative Cloud to have this option available. Each type of font has a different icon color so that you can distinguish between them more easily. The Adobe font icon is red.
Note: Adobe fonts will not be copied in case the project that uses them is duplicated when screens/containers are copied to other projects or imported from Proto.io Spaces or are copied to a different user account altogether. When opening these projects in the Editor, users will be prompted to select a different font or connect to an Adobe Creative Cloud account.
Uploaded Fonts
In the third section of the Font Manager, you're able to upload your own .woff files by either dragging-and-dropping or by browsing the files on your computer.
By uploading fonts to Proto.io you acknowledge that you have the necessary rights to use them. Also, keep in mind that fonts with the same name and style will be replaced on uploading.
In most cases, fonts will be correctly detected by Proto.io and their names/styles will be displayed. In the case that a font name and style you uploaded couldn't be detected, then you'll be asked to provide this information in order to add it to your Project fonts.
Fonts you upload through Font Manager are immediately added to your Project fonts and are marked with a checkmark ✔︎ next to their names.
You will be seeing all your Project fonts in the right pane. If you want to remove a font family or a particular style, you can use the relevant action button upon hovering over the font you want. Please note that removing uploaded fonts from your Project fonts doesn't delete those fonts from Font Manager. The fonts will still be visible in the left pane in case you want to add them in the future. You have the option to delete a font you uploaded through the relevant action button upon hovering over the font you want to delete in the left pane.