Use custom fonts

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.

Web Open Font Format (WOFF 2.0): TrueType/OpenType font offering better compression than WOFF 1.0.

SVG Fonts/Shapes: SVG fonts enable the use of SVG as glyphs when displaying text. The SVG 1.1 specification defines a font module that allows for the creation of fonts within an SVG document. Additionally, CSS can be applied to SVG documents, and the @font-face rule is applicable to text in SVG documents.

Embedded OpenType Fonts (EOT): EOT fonts are a compact version of OpenType fonts developed by Microsoft for use as embedded fonts on web pages.

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.