Use custom fonts
Add custom fonts in Ocean Pro CMS theme HubSpot
Custom fonts
Learn how you can use custom fonts in Ocean Pro Theme
What is a custom font?
Ocean Pro uses the Google Fonts library, for which you simply have to select them in the theme configuration, but in addition to the fonts included in the Google library there are other fonts that in this case are what we call Custom Fonts.
These fonts can be from other libraries such as Adobe Fonts or purchased fonts.
To add a custom font, this step-by-step guide will help you.
Important: Although the font library is obtained from Google Fonts, after selecting the font it is automatically downloaded to your HubSpot portal so as not to use the API, eliminating any related privacy issues.
Before we begin, let's look at the font formats that exist.
Different Font Formats
Before we begin, let's look at the font formats that exist.
TrueType Fonts (TTF): TrueType is a font standard developed in the late 1980s by Apple and Microsoft. It is the most prevalent font format for both Mac OS and Microsoft Windows operating systems.
OpenType Fonts (OTF): OpenType is a scalable computer font format built upon the TrueType foundation. It is a registered trademark of Microsoft and is widely used across major computer platforms today.
Web Open Font Format (WOFF): WOFF is a font format designed for use in web pages. Developed in 2009, it is now a W3C Recommendation. WOFF is essentially OpenType or TrueType with added compression and metadata, aimed at supporting font distribution from a server to a client over bandwidth-constrained networks.
Add custom fonts to Ocean Pro
To start it will be necessary to have at least two 3 TTF formats, WOFF and WOFF2 to obtain them you can simply convert them on this site for free: https://www.creativefabrica.com/webfont-generator/. You can use some other tool you know.
Upload custom fonts
-
Navigate to your content:
- Website Pages: In your HubSpot account, navigate to Content > Website Pages.
- Landing Pages: In your HubSpot account, navigate to Content > Landing Pages.
- Blog: In your HubSpot account, navigate to Content > Blog.
- Hover over your content and click Edit.
- In the content editor, click the Edit menu and select Theme: [Name of Theme].
- In the left sidebar menu, click a font dropdown menu
- Select Upload a custom font.
- and follow the steps
For more details see the following url.