Using custom fonts in Penpot 🔗 **Source:** [Using custom fonts in Penpot](https://www.youtube.com/watch?v=zoXYxUX7zDY) > [!note]+ Document Notes > tags: [penpot, design-tools, typography] > author: Penpot > source: YouTube > reference: https://www.youtube.com/watch?v=zoXYxUX7zDY > date created: 2024-12-19 18:30 > > # 🏷️ Title: Using custom fonts in Penpot > <!-- deep-read:sections start --> ## 🧰 Action Inbox - [H1] Upload custom font files to Penpot dashboard — fonts section #typography - [H2] Search for font name instead of scrolling — design interface #workflow - [H3] Check team access for custom fonts — collaboration feature #team ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - [Penpot Courses](https://penpot.app/courses) - [Google Fonts](https://fonts.google.com) ## 📝 Summary - Penpot includes Google Fonts by default but supports custom font uploads - Custom fonts can include pro versions, brand fonts, or licensed typefaces - Team members automatically get access to uploaded custom fonts - Font families are grouped automatically when files share the same font name - Search functionality helps locate fonts without scrolling through lists ## 📖 Main Content Penpot's typography system extends beyond the built-in Google Fonts catalog through custom font upload capabilities. Users can add proprietary fonts, premium versions of existing fonts, or licensed typefaces from independent foundries. The system intelligently groups font styles within the same family based on shared naming conventions, and automatically distributes access across team members for collaborative consistency. ## 🗒️ Notes #### ⏱️ [00:00](https://www.youtube.com/watch?v=zoXYxUX7zDY&t=0) — [H1] Default Google Fonts access - Key idea: Penpot provides Google Fonts catalog by default through fonts menu - Evidence: "PenPock gives you access to the Google Fonts catalog from the fonts menu by default" #### ⏱️ [00:12](https://www.youtube.com/watch?v=zoXYxUX7zDY&t=12) — [H2] Custom font use cases - Key idea: Custom fonts include pro versions, brand fonts, and licensed typefaces - Evidence: "It could be a pro version of the Google font, a font designed for your brand, or a font you've licensed from another platform or independent font foundry" #### ⏱️ [00:27](https://www.youtube.com/watch?v=zoXYxUX7zDY&t=27) — [H1] Font upload location - Key idea: Custom fonts are uploaded through the fonts section of Penpot dashboard - Evidence: "You can add any of these fonts from the fonts section of the penpot dashboard" #### ⏱️ [00:35](https://www.youtube.com/watch?v=zoXYxUX7zDY&t=35) — [H2] Automatic font family grouping - Key idea: Penpot groups font styles automatically when they share the same font name - Evidence: "PenPot will identify different font styles in the same family if they share the same font name" #### ⏱️ [00:45](https://www.youtube.com/watch?v=zoXYxUX7zDY&t=45) — [H3] Return to design workflow - Key idea: After upload, users can immediately return to design and access custom fonts - Evidence: "Now I've added my custom font. I can go back to my design and use it" #### ⏱️ [00:52](https://www.youtube.com/watch?v=zoXYxUX7zDY&t=52) — [H1] Team-wide font availability - Key idea: Custom fonts become available to all team members automatically - Evidence: "The font will be available to everyone in my team" #### ⏱️ [00:58](https://www.youtube.com/watch?v=zoXYxUX7zDY&t=58) — [H2] Font search functionality - Key idea: Search feature eliminates need to scroll through entire font list - Evidence: "No need to scroll the whole list. I can search for the font name" #### ⏱️ [01:08](https://www.youtube.com/watch?v=zoXYxUX7zDY&t=68) — [H3] Font implementation success - Key idea: Custom font successfully renders in text elements - Evidence: "And now I've got text working in my custom font" #### ⏱️ [01:15](https://www.youtube.com/watch?v=zoXYxUX7zDY&t=75) — [H1] Collaborative font access - Key idea: Team members can see and use custom fonts when opening shared files - Evidence: "Because the custom font has been uploaded for everyone on my team, any of my team who will open this file will be able to see and use this font, too" ## 📚 References - [Penpot Courses](https://penpot.app/courses) - [Using custom fonts in Penpot](https://www.youtube.com/watch?v=zoXYxUX7zDY) ## 🗣️ Paraphrase - Penpot comes with Google Fonts built-in but allows users to upload their own font files for branded or premium typography - The platform automatically organizes font variants into families and makes them searchable rather than requiring manual scrolling - Custom fonts are shared across the entire team workspace, ensuring design consistency when collaborators open shared files ## 📰 Newsletter **Custom Typography Made Simple in Penpot** Design teams often need fonts beyond the standard Google Fonts catalog—whether it's a premium typeface, custom brand font, or licensed design. Penpot's custom font upload feature makes this seamless through the dashboard fonts section. The real benefit? Team-wide access. Upload once, and everyone on your team can use the font immediately. No more "missing font" errors or inconsistent fallbacks when sharing designs. Pro tip: Penpot groups font variants automatically when they share naming conventions, and the search function saves time over scrolling through long font lists. Resources: [Penpot Courses](https://penpot.app/courses), [Typography in Design Systems](https://design-system.service.gov.uk/styles/typography/), [Font Licensing Guide](https://fontlicensing.com/) ## ✅ Action Items #### Community - Contributors: Create font licensing documentation for teams - Contributors: Develop font pairing guidelines for Penpot users - Maintainers: Consider font subsetting for performance optimization #### WordPress - Design: Document custom font workflows for theme developers - Training: Create lesson on web font optimization and performance - Documentation: Add font loading best practices to developer handbook ## 🧪 Hypotheses - Teams using custom fonts in Penpot achieve better brand consistency than those using only Google Fonts - Font search functionality reduces design workflow time compared to scrolling through alphabetical lists - Automatic team-wide font sharing reduces collaboration friction in distributed design teams - Font family grouping by name convention improves organization over manual categorization ### 📊 Methodology - Survey design teams on brand consistency metrics before/after custom font adoption - Time study comparing font selection methods: search vs scroll vs favorites - Collaboration analysis measuring font-related file sharing issues ### ❓ Questions - How does font loading performance compare between Google Fonts and uploaded custom fonts? - What font file formats does Penpot support beyond the standard web fonts? - Can custom fonts be organized into collections or tags for large font libraries? ### 🔮 Future Research - Font variable support and implementation in web-based design tools - Automated font pairing suggestions based on uploaded custom fonts - Integration possibilities with font management services like Adobe Fonts ### 💡 Implications - Practice: Teams can maintain brand consistency across design tools without technical workarounds - Policy: Organizations need clear font licensing policies for team-shared custom fonts - Education: Design teams require training on font file management and web font optimization - Funding: Budget considerations for premium font licensing in collaborative environments ### 🧠 Learning Styles Assessment Reading level estimate: 8th Grade #### 👀 Visual learners - Present: Video demonstration showing dashboard interface and font selection - Improve: Screenshots of font family grouping, search interface comparisons #### 🔊 Aural learners - Present: Narrated video walkthrough with clear step explanations - Improve: Audio description of visual interface elements #### 🗣️ Verbal learners - Present: Clear terminology definitions, font use case examples - Improve: Typography glossary, brand font terminology guide #### 🧩 Kinesthetic learners - Present: Step-by-step font upload process demonstration - Improve: Interactive font upload checklist, hands-on practice exercises #### 🧠 Logical learners - Present: Sequential workflow from upload to implementation - Improve: Font management decision tree, team permission flowchart #### 🧑‍🤝‍🧑 Social learners - Present: Team collaboration features highlighted - Improve: Font sharing collaboration scenarios, team font library best practices #### 🧘‍♀️ Solitary learners - Present: Individual workflow demonstration - Improve: Self-check font implementation guide, personal font library organization #### 🌿 Naturalistic learners - Present: Font ecosystem and family organization concepts - Improve: Typography evolution analogies, font classification systems ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Video has spoken narration describing actions - Improve: Alt text for font preview images, ARIA labels for interface elements #### Keyboard navigation - Present: Not demonstrated in video context - Improve: Document keyboard shortcuts for font search and selection #### Contrast and readability - Present: Clear interface visuals in demonstration - Improve: Font contrast checking guidance, readability best practices #### Text resizing and reflow - Present: Not addressed in video scope - Improve: Custom font behavior at different sizes and zoom levels #### Media and captions - Present: Spoken narration available - Improve: Closed captions for accessibility, transcript download #### Forms and interactions - Present: Upload interface shown functioning - Improve: Error handling for unsupported font formats, progress indicators ### 🌍 DEIB Assessment #### Cultural breadth - Present: Generic font examples without cultural specificity - Improve: Examples from non-Latin scripts, multilingual typography considerations #### Inclusive language - Present: Clear, jargon-free explanations - Improve: Define technical terms like "font foundry" and "licensing" #### Neurodiversity support - Present: Short, focused video format - Improve: Step numbering, clear section breaks, consistent terminology #### Representation - Present: Functional demonstration without human representation - Improve: Diverse font examples, inclusive brand typography cases #### Psychological safety - Present: Non-judgmental tone about font choices - Improve: Acknowledgment of different team skill levels, budget constraints ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Strong logical flow from problem (limited fonts) to solution (upload feature) - Inductive strength: Good specific examples supporting general font upload benefits - Causal reasoning: Clear cause-effect relationship between upload and team access #### Fallacies - No significant logical fallacies identified in the brief tutorial format #### Tone of voice - Overall tone: Instructional and helpful, focusing on practical benefits without overselling features ### 🛡️ DARVO Analysis - Deny: No denial patterns present - Attack: No attacks on other tools or approaches - Reverse victim/offender: Not applicable to tutorial content - Emotional cues and rhetoric: Straightforward, educational tone without manipulative elements ## 🎯 Conclusion Penpot's custom font feature addresses a key limitation in design tool typography by enabling teams to upload and share branded or premium fonts seamlessly. The automatic font family organization and search functionality streamline the designer experience, while team-wide access ensures collaboration consistency. For design teams requiring brand-specific typography, this feature eliminates technical barriers and maintains design system integrity across collaborative projects. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad Purpose: Stage CEE units that become Literature notes. Split level: H3 ### [H1] Penpot enables seamless custom font uploads > [!quote] [Using custom fonts in Penpot](https://www.youtube.com/watch?v=zoXYxUX7zDY) by [[Penpot]] via [[YouTube]]. Published 2024. Accessed 2024-12-19. > "You can add any of these fonts from the fonts section of the penpot dashboard." Demonstrates how design tools can extend beyond default font catalogs through simple upload interfaces. [view highlight](https://www.youtube.com/watch?v=zoXYxUX7zDY&t=27#H1) #typography #design-tools ID:rw_penpot_001 ### [H2] Custom fonts automatically distribute across teams > [!quote] [Using custom fonts in Penpot](https://www.youtube.com/watch?v=zoXYxUX7zDY) > "The font will be available to everyone in my team." Team-wide font sharing eliminates collaboration friction in design workflows. [view highlight](https://www.youtube.com/watch?v=zoXYxUX7zDY&t=52#H2) #collaboration #teamwork ID:rw_penpot_002 --- ### 🔖 Atomic Split Pad (Zettel Candidates) Purpose: Promote reusable claims into Atomic notes. Split level: H4 #### [Z1] Font family grouping improves organization - Applies when multiple font files share naming conventions - Pointer to 00:35 timestamp demonstration - Links: [[Typography-Systems]] [[Design-Tool-Features]] #### [Z2] Search reduces interface navigation time - Scope limited to lists with many items requiring selection - Pointer to 00:58 font search demonstration - Links: [[User-Interface-Design]] [[Workflow-Optimization]] --- ### ✏️ Fleeting Queue Purpose: Capture quick actions for Fleeting notes. - [F1] Research font licensing implications for team uploads — legal/compliance #fleeting #typography - [F2] Test font loading performance with custom vs Google Fonts — technical analysis #fleeting #performance - [F3] Document font file format support in Penpot — feature documentation #fleeting #specs <!-- deep-read:sections end --> ## 📺 Video  --- # 📄 Full Transcript *Auto-generated from YouTube captions · timestamps roughly every 30 seconds · [watch on YouTube](https://www.youtube.com/watch?v=zoXYxUX7zDY)* **[00:04]** When it comes to choosing fonts, PenPock gives you access to the Google Fonts catalog from the fonts menu by default. But you might want to use a font that's not in the Google catalog. It could be a pro version of the Google font, a font designed for your brand, or a font you've licensed from another platform or independent font foundry. You can add any of these fonts from the fonts section of the penpot dashboard. Here you can upload your custom font files and PenPot will identify different font **[00:36]** styles in the same family if they share the same font name. Now I've added my custom font. I can go back to my design and use it. The font will be available to everyone in my team. No need to scroll the whole list. I can search for the font name. And now I've got text working in my custom font. Because the custom font has been uploaded for everyone on my team, any of my team who will open this file will be able to see and use this font, too. Join us at penmpot.app/courses. **[01:07]** [Music]