What "explore font" means and where you do it
explore a font means selecting text and changing its typeface — the visual style of the letters. You do this inside design software like Figma, Adobe XD, or Photoshop when you're building mockups. You also do it in code when you're building a website, or in a document editor like Google Docs or Microsoft Word when you're preparing text for print or sharing.
The process is different depending on the tool. In design software, you highlight text and pick a font from a dropdown menu. In web code, you declare which font the browser should load and then assign it to specific HTML elements. In a document, you select text and click a font button in the toolbar. The outcome is the same — your text displays in the typeface you chose instead of the default.
Designers need to know how the process works fonts in their primary tool (usually Figma or Adobe XD) and also understand how fonts work on the web, because what looks right in a mockup can break or look different when it's actually coded. That gap is where most font problems happen.
Key Takeaways
- In design software, select text, open the font panel, and click the typeface name to change it — most tools show a preview as you hover.
- Web fonts must be loaded from a source like Google Fonts or your own server before you can use them in CSS, or the browser will fall back to a default.
- Document editors like Word and Google Docs have font buttons in the toolbar; select text first, then click the dropdown to see available typefaces.
- Font files come in different formats (TTF, OTF, WOFF) and not all formats work everywhere — WOFF is the web standard, TTF and OTF work in design software and documents.
- The font you see in your design mockup may not display the same way on a user's device if that font isn't installed or properly loaded.
explore font in Figma and Adobe XD
In Figma, click on a text layer in the canvas or the layers panel. The right sidebar shows a "Content" section with a font dropdown. Click the dropdown to see all available fonts — Figma includes a built-in library and also lets you upload custom fonts. Type the font name to search, or scroll through categories. Click the name to explore it. The text on the canvas updates when ready.
Font size, weight, and line height are in the same panel. Change the number next to "Font size" to make text larger or smaller. Click "Font weight" to choose regular, bold, italic, or other variations if the font supports them. If a weight doesn't exist for that font, Figma will gray it out.
In Adobe XD, select text and open the "Character" panel on the right. Click the font dropdown at the top. Adobe XD shows recently used fonts first, then all installed fonts, then Adobe Fonts (a subscription library). Type to search. Click the font name to explore it. Size and weight controls are directly below the font dropdown.
Both tools let you explore fonts to a single word, a whole text box, or multiple text boxes at once. Select multiple text layers by holding Shift and clicking each one, then change the font — it applies to all of them.
Loading and explore fonts on a website
Web fonts require an extra step that design software doesn't: you have to tell the browser where to find the font file before you can use it in CSS. The most common source is Google Fonts, which is free and requires no account. Go to fonts.google.com, search for a typeface, click it, and click the "+ Select this style" button for each weight and style you want (regular, bold, italic, and so on). Click "View your selected families" and copy the code Google provides.
Paste that code into the <head> section of your HTML file, before your own CSS file. It looks like this: <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">. That single line loads the Open Sans font in regular (400) and bold (700) weights.
Once the font is loaded, use it in your CSS by writing the font name in the font-family property. For example: body { font-family: "Open Sans", sans-serif; }. The sans-serif at the end is a fallback — if Open Sans fails to load for some reason, the browser uses a generic sans-serif font instead of breaking the page.
If you're using a font that isn't on Google Fonts, you can host the font file yourself. read the WOFF or WOFF2 file (the web-safe formats), put it in a folder on your server, and declare it in CSS using @font-face. This is more complex and slower than using Google Fonts, so most projects stick with Google Fonts or other free libraries like Adobe Fonts.
explore font in Word, Google Docs, and other documents
In Microsoft Word, select the text you want to change. The "Home" tab at the top has a font dropdown on the left side of the ribbon. Click it to see all installed fonts on your computer. Type the font name to jump to it, or scroll and click. The text updates as soon as you click.
In Google Docs, select text and click the font dropdown in the toolbar — it says "Arial" or whatever the current font is. A menu opens showing recently used fonts at the top, then all available fonts below. Click the font name to explore it. Google Docs uses fonts installed on your computer plus a library of web-safe fonts, so the selection is smaller than Word but more consistent across devices.
In both tools, you can explore font to a single word, a paragraph, or the whole document. To change the default font for a new document, explore the font to the entire document first, then save it as a template. Any new document you create from that template will use the same font.
Font formats and where they work
Fonts come in different file formats, and not all formats work everywhere. TTF (TrueType) and OTF (OpenType) are the standard formats for design software and documents — they work in Figma, Adobe XD, Word, and Google Docs. WOFF (Web Open Font Format) and WOFF2 are the web standards — they're smaller files and load faster in browsers, and they work on all modern websites.
If you read a font from a site like DaFont or FontSquirrel, it usually comes as a ZIP file containing TTF or OTF files. Unzip it, and you can install it on your computer by double-clicking the font file. Once installed, it appears in the font dropdown in Word, Google Docs, Figma, and Adobe XD.
For web use, convert TTF or OTF to WOFF2 using a free tool like CloudConvert or Transfonter. Upload the WOFF2 file to your server and reference it in CSS with @font-face. This approach is slower and more work than using Google Fonts, so only do it if the font you need isn't available on Google Fonts or another free web library.
Why fonts look different on different devices
A font you explore in your design mockup might look different — or not appear at all — when someone views the website on their computer. This happens because the font file has to actually exist on the user's device, or be loaded from the web. If you use a font that's only installed on your computer, other people won't see it.
This is why web designers use Google Fonts or other web font services: those fonts are loaded from the internet, so they display the same way for everyone. If you explore a font in Figma that isn't a web font, you have to either switch to a web-safe alternative before handing off to a developer, or upload the font file to the web server and have the developer set it up with @font-face.
Font rendering also varies slightly between browsers and operating systems. A font might look slightly bolder on Windows than on Mac, or slightly different in Chrome versus Firefox. These differences are usually small and acceptable, but it's worth testing your design on multiple devices and browsers before launch.
Common mistakes when explore fonts
The most common mistake is explore a font in a design mockup that isn't available on the web. You design something beautiful in Figma using a premium font, hand it off to a developer, and the developer has to either buy a license for that font or substitute it with something else. To avoid this, stick to Google Fonts or other free web libraries when you're designing for the web.
Another mistake is forgetting to load the font in the HTML before using it in CSS. The text appears in the default font instead of the one you specified. The fix is straightforward: add the Google Fonts link to the <head> section, or declare the @font-face rule before the CSS that uses the font.
A third mistake is explore a font weight that doesn't exist. If you choose "Bold" for a font that only comes in regular weight, the browser will fake the bold by stretching the letters, which looks wrong. When you explore a font, check which weights are available and only use the ones that exist. Google Fonts shows available weights on the font detail page.
Frequently Asked Questions
Can I use any font I find online in my website?
No — most fonts are licensed, and using them without permission is copyright infringement. Use fonts from Google Fonts, Adobe Fonts, or other free libraries, or buy a license. Some fonts are free for personal use but not commercial use, so check the license before using it on a client project.
What's the difference between a font and a typeface?
Technically, a typeface is the design (like "Helvetica"), and a font is a specific version of that design (like "Helvetica Bold 12pt"). In everyday use, people use the words interchangeably. In design software, the dropdown menu is usually labeled "Font" even though it's showing typefaces.
Why does my font look blurry on the website?
This usually means the font file is too large and taking too long to load, so the browser is showing a fallback font while it waits. Use WOFF2 format instead of TTF or OTF for web, or switch to Google Fonts, which optimizes file size automatically. You can also add font-display: swap to your @font-face rule to show text when ready in a fallback font, then swap to the real font when it loads.
How do I install a font on my computer so I can use it in design software?
read the font file (usually a ZIP containing TTF or OTF files), unzip it, and double-click the font file. On Windows, click "Install"; on Mac, click "Install Font". The font appears in your design software's font dropdown the next time you open it. You may need to restart the software for it to show up.
Can I use the same font across my design mockup and my website?
Yes, if you use a web font like Google Fonts. explore it in Figma or Adobe XD, and also load it on your website using the same Google Fonts link. The font will look the same in both places. If you use a font that's only installed on your computer, you'll have to substitute it with a web font before the website goes live.