Use webfonts without manually installing font locally
I would like to use icon libraries (web fonts) without to install them as fonts in my system. For that it would be great to have the option to use all icons of a downloaded "woff-file" i.e. from the following sites and embed them into the xd project:
materialdesignicons.com
flaticon.com
Google Web Fonts
FontAwesome
Tom
shared this idea
35 comments
-
Roman Polishchuk
commented
It is not necessary to do this through CSS. You can use Unicode characters and fonts, for example from here https://exoticfonts.com/creepy-text-generator/
-
Gabriel
commented
We sure want it, indeed. The license for mobile vs laptop also impedes our work ... I would propose inserting a webfonts possibility with @importance) (or direct upload.weff font files to XD designs if our clients want to use font only on their websites that we will need to access mobile font style fonts (most of which are under any licence). https://fontvilla.com will help you in this matter
-
Dhaval Rathod
commented
Designers always seeking some fonts and to use those fonts they have to download and install the fonts. I think the adobe can make it more user-friendly by either placing specific font in specific files or by direct access throw Google Fonts or Adobe Typekit Fonts.
This will be much much helpful to UI Designers who always try to use new font on their next project.
-
Andrew Clarkin
commented
Maybe a plug-in could solve this problem.
-
Lukasz
commented
It could be awesome to have google fonts library inside XD to use them without installing new font everytime
-
Chris Ryland
commented
Have a look at http://emsoftware.com/xdplugins/icons-and-symbols/ for a free icon placement plugin with over 5,000 symbols from 12 popular icon sets. (Direct-install link: https://xd.adobelanding.com/en/xd-plugin-download/?name=02ec2f87)
No fonts needed, set at any size, fully editable.
(Disclaimer: This is our company's product.)
-
Tu Chu
commented
I like it! That will help me use font-icon with any type.
-
Anonymous
commented
Hi, I'm a UI/UX Designer/Dev who needs to embed .eot, ttf, svg, woff, and woff2 files instead of using the headtag to my Adobe Cloud web project saved fonts. The reason this is important is because the sites I work on are not all open-source and are in a closed intranet environment.
The Google font kits are not matching correctly to the Adobe fonts, so Adobe, please provide these hard files!
Same goes for icons similar to this stream.
-
JL Garcia
commented
Configure the file in a way to tell what fonts the prototype needs and where to find it, Google Fonts, Adobe Fonts, MyWebsite/fonts or whatever they are for this prototype to work without having to install them in a handheld device or the computer where the prototype is gong to be viewed.
This way we could design using any font necessary, iterate, play with before settle with what fonts are going to be used in the final design. Otherwise we are limited to what fonts the device has loaded.
A much better solution would be to embed the fonts with the prototype, but if is not possible or difficult, just referencing the fonts to a website may work.
I only want to use some of the available fonts in my computer in the prototypes. At this time is not possible or very difficult to do.
Thanks. -
Jan
commented
Adobe is always trying to push Adobe fonts of course, but its kinda annoying cause we don't wanna use Typefikit, wWe use Google Web Fonts.
-
Renee Frisbie
commented
So can you work with Google fonts yet or not?
-
Dave
commented
ESPECIALLY Google Web Fonts! I would really, really like to see this happen. Adobe Fonts is a good start, but I strictly use google web fonts in my builds and need to be able to send the client a pretty good example of what they're going to see.
-
Wren
commented
I'm going to try Skyfonts. I use Google fonts as well as a work horse across all my sites across various CMSs. Trying to keep the latest versions with a Design systems and teams is a pain.
-
Mike B.
commented
hey,
just import a font-library like fontawesome and u have everything u need,
in your css or sass or less just @import the desired font-library and use as you would do as for any other font:
eg. in your css, less or sass source:
@import url('https://fonts.googleapis.com/css?family=Roboto');
</style>and then
in your css, less or sass source:
body{
font-family: 'Roboto', sans-serif;
}cheeers
mike -
Chi Ax
commented
I'll +1 this too. Needed this for ages.
-
Franz Hoffman
commented
+1 Can't wait to be able to use web fonts in XD, including custom web fonts created in Illustrator and hosted on Fontself Catapult https://www.fontself.com/catapult (disclosure: I'm a Fontself team member ;)
-
Michal Mechacek
commented
Definitely yes, we want it. Our work is still blocked by licence for web vs desktop ... if our clients want use fonts only on their websites we still needs download desktop type fonts (which are in most under some licence)
I can recommend add some possibility use webfonts with @import() or direct upload .woff font files into XD designs. https://www.fontsquirrel.com/ has sometimes problems to generate .ttf s from .woff. -
Mehdi Bouhalassa
commented
Please, please do.
At the same time, it's NEVER gonna happen, because Adobe Typekit.
And this is why we can't have nice things. -
Kathreen Rowen Hervera
commented
INSTALLING SKYFONT WORKS
-
Jane
commented
ABSOLUTELY. Every web designer uses Google fonts A LOT. I've just started to use Xd and can't believe that the fonts that I'll definitely be using in the finished product are missing when I view my prototype on iOS - what's the point of that??