{"id":4526,"date":"2024-04-15T00:33:03","date_gmt":"2024-04-14T16:33:03","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=4526"},"modified":"2024-04-15T00:33:03","modified_gmt":"2024-04-14T16:33:03","slug":"import-personalized-typefaces","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/import-personalized-typefaces\/","title":{"rendered":"Import personalized typefaces"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p id=\"\">You have the option to include extra typefaces directly into your site from the <strong id=\"\">Typography<\/strong> dropdown in the Design panel. Opt for <strong id=\"\">Import typefaces<\/strong> and you\u2019ll be directed to <strong id=\"\">Site settings <\/strong>&gt;<strong id=\"\"> Typography<\/strong> section. From there, you can upload your unique custom typefaces to your site.<\/p>\n<p id=\"\">In case the typeface you wish to use is accessible through Adobe typefaces (Typekit) or Google typefaces, you can incorporate them via the integrations in <strong id=\"\">Site settings <\/strong>&gt;<strong id=\"\"> Typography<\/strong> section. Find out more about integrating Adobe typefaces.\u00a0<\/p>\n<h6 id=\"\"><strong id=\"\">Valuable to be aware of: <\/strong>You do not require a paid Site or Workspace plan to import personalized typefaces.<\/h6>\n<p id=\"\">Throughout this guide, you\u2019ll discover:<\/p>\n<ol id=\"\">\n<li id=\"\">How to import personalized typefaces<\/li>\n<li id=\"\">How to select the appropriate typeface format<\/li>\n<li id=\"\">How to modify installed typefaces<\/li>\n<li id=\"\">How to specify alternative typefaces and display configurations<\/li>\n<li id=\"\">How to evaluate your typefaces in the Designer<\/li>\n<li id=\"\">How to eliminate personalized typefaces from your site<\/li>\n<\/ol>\n<h2 id=\"\">How to import personalized typefaces<\/h2>\n<p id=\"\">If you wish to utilize personalized typefaces on your site, open <strong id=\"\">Site settings<\/strong> &gt; <strong id=\"\">Typography<\/strong> section, scroll down to <strong id=\"\">Personalized typefaces<\/strong>, and upload your typeface file(s) there.<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1500px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94a6e7c92a16eb2ba75ec_642b3111a2fa034eee79e81d_ll72ou-nacsuyurwsj4okuzqaefefpiqxjakyvaxi41eexpkjvmgudthhfqehxmwtb6clhhnntwvr6f8z1tk7w0nrjzehmjoajjcjm7wtlo0osyslgsraqzuduxzrxwgodlfwqozj3poqlnsoaixaz.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"The Custom fonts section within the Fonts tab of Site settings allows you to upload custom fonts to your site.\" title=\"64b94a6e7c92a16eb2ba75ec_642b3111a2fa034eee79e81d_ll72ou-nacsuyurwsj4okuzqaefefpiqxjakyvaxi41eexpkjvmgudthhfqehxmwtb6clhhnntwvr6f8z1tk7w0nrjzehmjoajjcjm7wtlo0osyslgsraqzuduxzrxwgodlfwqozj3poqlnsoaixaz\"><\/div>\n<\/figure>\n<blockquote id=\"\"><p><strong id=\"\">Crucial: <\/strong>Kindly review your typeface\u2019s licensing agreement and ensure you have the authorization to use the typeface on your site prior to uploading. <a href=\"https:\/\/www.typography.com\/faq\/category.php?topicID=10\" id=\"\">Learn more about typeface licensing and usage<\/a>.<\/p><\/blockquote>\n<p id=\"\"><strong id=\"\">Seeking complimentary typefaces? Explore:<\/strong><a href=\"https:\/\/webflow.com\/blog\/9-places-to-find-free-and-almost-free-fonts\" id=\"\"> 9 places to find free (and almost free) typefaces<\/a><\/p>\n<h2 id=\"\">How to select the appropriate typeface format<\/h2>\n<p id=\"\">You can upload various typeface file formats to your Webflow site.\u00a0<\/p>\n<h6 id=\"\"><strong id=\"\">Valuable to be aware of: <\/strong>You can upload a maximum file size of 4MB per typeface file.<\/h6>\n<p id=\"\"><strong id=\"\">Compatible across most browsers<\/strong><\/p>\n<ul id=\"\">\n<li id=\"\">WOFF \u2014 Web Open Font Format (<a href=\"https:\/\/caniuse.com\/#feat=woff\" id=\"\">review supported browsers<\/a>)<\/li>\n<li id=\"\">TTF\/OTF \u2014 TrueType Font and OpenType Font (<a href=\"https:\/\/caniuse.com\/#feat=ttf\" id=\"\">review supported browsers<\/a>)<\/li>\n<\/ul>\n<p id=\"\"><strong id=\"\">Supported by a few browsers<\/strong><\/p>\n<ul id=\"\">\n<li id=\"\">WOFF 2.0 \u2014 Web Open Font Format (<a href=\"https:\/\/caniuse.com\/#feat=woff2\" id=\"\">review supported browsers<\/a>)<\/li>\n<li id=\"\">EOT \u2014 Embedded OpenType (<a href=\"https:\/\/caniuse.com\/#feat=eot\" id=\"\">review supported browsers<\/a>)<\/li>\n<li id=\"\">SVG \u2014 SVG fonts (<a href=\"https:\/\/caniuse.com\/#feat=svg-fonts\" id=\"\">review supported browsers<\/a>)<\/li>\n<\/ul>\n<h6 id=\"\"><strong id=\"\">Valuable to be aware of:<\/strong> You do not have to upload every file format. Nonetheless, you can upload several different formats to encompass maximum browser support. WOFF is a solid format with comprehensive browser compatibility and a reasonable file size. Should you lack a WOFF or WOFF2 version of your typeface files, you can utilize typeface converters available online.<\/h6>\n<blockquote id=\"\"><p><strong id=\"\">Crucial: <\/strong>Webflow accommodates variable typefaces in TTF, OTF, WOFF, and WOFF2 formats. However, Webflow does not support variable typefaces in EOT and SVG formats presently.<\/p><\/blockquote>\n<h2 id=\"\">How to modify installed typefaces<\/h2>\n<p id=\"\">Post the typefaces files being uploaded, you can alter the typeface type name, the typeface weight, and the typeface style.<\/p>\n<h6 id=\"\"><strong id=\"\">Leading approaches:<\/strong> You can upload various versions of a typeface and designate a distinct <strong id=\"\">typeface weight<\/strong> and <strong id=\"\">style<\/strong> for each version, or you can import variable typefaces, which encompass all variations (e.g., weight, width, etc.) in a typeface family\u2019s span. If you upload various versions of a typeface, ensure to employ the same <strong id=\"\">typeface family<\/strong> for all versions of the same typeface. This action will ensure the typeface family is correctly grouped together in the Designer.<\/h6>\n<p id=\"\">Once the typeface family names match accurately, you can <strong id=\"\">upload<\/strong> each typeface file to your site. The uploaded files will display in the Designer upon reopening your site in the Designer.<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1500px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94a6e7c92a16eb2ba75f4_642b311107a463204595585c_fx36vlic-h_3taq8xj4jhlw1i8e9cdpjrafa6fotvpste3zznihvo-aa4hufkfnxsauupsnbw8nkvhyhwogxfkhy7-yqmmwby6txljgjk9txnifkvqhaorndqltq6t52iqnu_3pkonvvskqphjes6d.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"The \u201cUpload font file\u201d button is highlighted next to a custom font in Site settings &gt; Fonts tab &gt; Custom fonts.\" title=\"64b94a6e7c92a16eb2ba75f4_642b311107a463204595585c_fx36vlic-h_3taq8xj4jhlw1i8e9cdpjrafa6fotvpste3zznihvo-aa4hufkfnxsauupsnbw8nkvhyhwogxfkhy7-yqmmwby6txljgjk9txnifkvqhaorndqltq6t52iqnu_3pkonvvskqphjes6d\"><\/div>\n<\/figure>\n<p id=\"\">You can always <strong id=\"\">modify<\/strong> your personalized typeface settings. You can also <strong id=\"\">erase<\/strong> uploaded typefaces.<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1500px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94a6e7c92a16eb2ba75f1_642b31129334b28a00235c38_ffofu_hgt19s3qyvqqhiyouggxqqni3rspn2mvcrl8gcibtwxb2mqz81rux86nh_-t2vzninax9lkcpybjic-6u8cq1brfegtcgdy2lth6mdj56elqbtmkpdgtqqrzpav5f_s-cp2qrproo7cdffrw.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"The \u201cEdit\u201d and \u201cDelete\u201d buttons are highlighted next to installed custom fonts.\" title=\"64b94a6e7c92a16eb2ba75f1_642b31129334b28a00235c38_ffofu_hgt19s3qyvqqhiyouggxqqni3rspn2mvcrl8gcibtwxb2mqz81rux86nh_-t2vzninax9lkcpybjic-6u8cq1brfegtcgdy2lth6mdj56elqbtmkpdgtqqrzpav5f_s-cp2qrproo7cdffrw\"><\/div>\n<\/figure>\n<h2 id=\"\">How to define alternative typefaces and display settings<\/h2>\n<p id=\"\">Alternative typefaces guarantee comprehensive compatibility between browsers and operating systems. Should a site visitor\u2019s browser fail to load your personalized typeface, it shifts to the alternative typeface. Alternative typefaces are automatically generated for every typeface family you upload.<\/p>\n<p id=\"\">You can <strong id=\"\">alter<\/strong> the alternative typeface for every typeface family and choose the typeface it reverts to from an array of available typefaces.<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1500px\">\n<div id=\"\">\n<figure id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94a6e7c92a16eb2ba75fc_642b311107a463cde795585d_kj5nftgznvs3b6bebxavqud6l6as2yzrf0skhkxtvencpajxfmhgrmtyhhdjrb27h7go0h1rwy6yys36ow0ds1pdjqz2du1zoebb_cslbgleqiy01pl4wot4el10348wroys4k3rsynr3zfvj3loec.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b94a6e7c92a16eb2ba75fc_642b311107a463cde795585d_kj5nftgznvs3b6bebxavqud6l6as2yzrf0skhkxtvencpajxfmhgrmtyhhdjrb27h7go0h1rwy6yys36ow0ds1pdjqz2du1zoebb_cslbgleqiy01pl4wot4el10348wroys4k3rsynr3zfvj3loec\"><\/div>\n<\/figure>\n<p id=\"\">It&#8217;s possible to <strong id=\"\">change<\/strong> the<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@font-face\/font-display\" id=\"\"> font display<\/a> preferences, which decide how font faces load depending on the browser&#8217;s saved data.<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1500px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94a6e7c92a16eb2ba75f9_642b3111de75a4725585c49a_plxzemzukzzii0x1nckma_4uyx7blcxkblsdpxghgdruqefyu2oknzlxz751x8sxsav5ohjbjy-0rtxdl3t7lxmkotcni9le9bi7j5-s2ahmejx9dhhe1tn6eovqoa6ookkm067abeyvkv6zkat_bt.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"The \u201cDisplay\u201d setting for an installed custom font called Mona sans is set to swap.\u00a0\" title=\"64b94a6e7c92a16eb2ba75f9_642b3111de75a4725585c49a_plxzemzukzzii0x1nckma_4uyx7blcxkblsdpxghgdruqefyu2oknzlxz751x8sxsav5ohjbjy-0rtxdl3t7lxmkotcni9le9bi7j5-s2ahmejx9dhhe1tn6eovqoa6ookkm067abeyvkv6zkat_bt\"><\/div>\n<\/figure>\n<h6 id=\"\"><strong id=\"\">Insider tip: <\/strong>By setting the font display preferences to swap, you can avoid a <a href=\"https:\/\/web.dev\/font-display\/\" id=\"\">flash of invisible text<\/a> during page loading by using a system font.<\/h6>\n<h2 id=\"\">Ways to check your fonts in the Designer interface<\/h2>\n<p id=\"\">Inside the Designer, you have complete access to your custom fonts and font variations. You can explore the font you require in the <strong id=\"\">Appearance panel <\/strong>&gt;<strong id=\"\"> Typesetting <\/strong>&gt; <strong id=\"\">Font<\/strong>. The <strong id=\"\">Font<\/strong> selection categorizes fonts according to the source (e.g., Google fonts, Web fonts, Custom fonts, etc.) and arranges them alphabetically within each source. Any uploaded fonts on your site will be listed under <strong id=\"\">Custom fonts<\/strong>.<\/p>\n<p id=\"\">You have the option to apply your custom font to any text component, any parent element, or any HTML tag to affect all paragraphs or all H1s.<\/p>\n<h2 id=\"\">The process of eliminating custom fonts from your site<\/h2>\n<p id=\"\">To get rid of a custom font from your site, you must locate all occurrences of that custom font, delete them from your site, and ultimately erase the custom font from <strong id=\"\">Site settings<\/strong> &gt; <strong id=\"\">Fonts<\/strong> tab &gt; <strong id=\"\">Custom fonts<\/strong>.\u00a0<\/p>\n<blockquote id=\"\"><p><strong id=\"\">Note: <\/strong>Simply deleting a custom font from <strong id=\"\">Site settings<\/strong> &gt; <strong id=\"\">Fonts<\/strong> tab will not entirely remove the custom font from your site. The custom font will still be present in your site\u2019s published CSS until you delete all instances of the custom font from your site.<\/p><\/blockquote>\n<p id=\"\">To find all instances of a custom font on your site, access the <strong id=\"\">Appearance manager<\/strong> and search for the font name. This action will generate a list of all the classes and HTML tags on your site using that custom font. You can click the \u201c<strong id=\"\">list<\/strong>\u201d symbol next to each class to see a list of elements and components utilizing that class.\u00a0<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1500px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b948552187dbf9b4ef0d74_642b3111587634629b01e172_212bt73iklhmwupctnkbc2etacvo8e_ottw2uua3qri3pb_j1jlxcse-1skg-8c9sl0ow5fvyroavaytykk9-n69tli4ocdbhem9nzj8qjveg5gtkxpqphlzsuvrxkrrestjwk73h9pt-9bsw-ld0e.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"The Style manager search for the custom font \u201cInter\u201d shows that the Body (All pages) tag and two classes use the font. The list icon is highlighted to show the elements affected on the current and other pages.\" title=\"64b948552187dbf9b4ef0d74_642b3111587634629b01e172_212bt73iklhmwupctnkbc2etacvo8e_ottw2uua3qri3pb_j1jlxcse-1skg-8c9sl0ow5fvyroavaytykk9-n69tli4ocdbhem9nzj8qjveg5gtkxpqphlzsuvrxkrrestjwk73h9pt-9bsw-ld0e\"><\/div>\n<\/figure>\n<p id=\"\">Once you&#8217;ve identified the classes and\/or HTML tags using the custom font, you must either erase the elements utilizing that font and tidy up their unused classes in the <strong id=\"\">Appearance manager<\/strong>, or modify the font used by those classes and\/or HTML tags in <strong id=\"\">Appearance panel<\/strong> &gt; <strong id=\"\">Typesetting <\/strong>&gt;<strong id=\"\"> Font<\/strong>.\u00a0<\/p>\n<p id=\"\">After erasing all occurrences of the custom font from your site, you can eliminate the custom font from Site settings:\u00a0<\/p>\n<ol id=\"\">\n<li id=\"\">Navigate to <strong id=\"\">Site settings<\/strong> &gt; <strong id=\"\">Fonts<\/strong> tab &gt; <strong id=\"\">Custom fonts<\/strong>\u00a0<\/li>\n<li id=\"\">Select <strong id=\"\">Delete<\/strong> next to the custom font you wish to remove from your site<\/li>\n<li id=\"\">Re-publish your site for the changes to become effective\u00a0<\/li>\n<\/ol>\n<p id=\"\"><strong id=\"\">For more information: <\/strong>Advanced Web Typography<\/p>\n","protected":false},"excerpt":{"rendered":"Upload custom fonts in your Site settings to use them on your Webflow site.","protected":false},"author":2,"featured_media":4527,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[286],"tags":[],"class_list":{"0":"post-4526","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-site-settings","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4526","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=4526"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4526\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/4527"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=4526"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=4526"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=4526"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}