Introduction
When building websites, it’s not uncommon to receive designs that specify Yu Gothic as the font. However, Webflow only supports Google Fonts by default, and Yu Gothic is not one of them.
To use Yu Gothic in Webflow, you’ll need to take an alternative approach, such as:
- Using Adobe Fonts
- Uploading font files manually
- Writing custom CSS to define a
font-family
In this article, we’ll focus on the custom CSS method to apply Yu Gothic using the font-family property.
What is Yu Gothic?
Yu Gothic is a Japanese sans-serif font designed for high readability, even in long passages of text. It features slightly narrow character widths and generous spacing, making it ideal for everything from body text to captions and headings.
If you've been a Windows user, you're likely familiar with Yu Gothic, as it's often pre-installed on Windows systems. It’s considered a staple among Japanese system fonts.
What is font-family?
The font-family property in CSS is used to define which fonts should be applied to text on a webpage. Even when you select fonts via Google Fonts in Webflow, the actual font application is handled through font-family in the backend CSS.
How to Use Yu Gothic in Webflow
To apply Yu Gothic in your Webflow project, you need to write custom code to inject the font-family declaration into the <head> of your site.
Setup Steps
- Go to your Webflow Project Settings
- Click on the Custom Code tab
- In the Head Code section, paste the following snippet:
<style>
body {
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
}
</style>
This targets the body element, so the font will apply to all text across the site unless otherwise overridden.
✅ Note: Since Yu Gothic is a system font, it may not be available on all user devices. That’s why the code includes a font fallback list—if one font isn’t available, the next one in line is used. Always include fallbacks to ensure proper font rendering.
Applying to Specific Elements
If you want to apply Yu Gothic only to certain elements, assign a custom class and use that in your CSS instead of targeting body. For example:
<style>
.yu-gothic {
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
}
</style>
Then, add the class yu-gothic to any element in Webflow where you want the font applied.
Conclusion
To use Yu Gothic in Webflow, simply define it using custom CSS and the font-family property. This method allows you to use fonts not available in Google Fonts or Adobe Fonts.
Yu Gothic is a versatile, easy-to-read font that works well in many design contexts. If your project calls for it, try out this method and ensure you include fallback fonts for optimal cross-platform compatibility.
.svg)
