#WebFonts

2 days ago

Locale – Josh Puckett Preview sentences across locally available font families using the browser's Local Font Access API.

Locale – Josh Puckett — Preview sentences across locally available font families using the browser's Local Font Access API.
#WebFonts

0 1 0 0

Typographica

@typographica.org

1 month ago

Fonts | 2025 | The Web Almanac by HTTP Archive Fonts chapter of the 2025 Web Almanac covering performance, design, and development trends for typography across the web.

Bram Stein and @josesole.bsky.social’s extremely thorough Fonts chapter of the Web Almanac is out: almanac.httparchive.org/en/2025/fonts

#Fonts #WebDesign #Webfonts

8 3 2 0

Space Hobo

@spacehobo.teh.entar.net.ap.brid.gy

4 months ago

Original post on teh.entar.net

Dear #LazyWeb:

Is there still a good reason to have separate "Web Font" file formats vs Desktop? Like, if I can load an OTF font in my CSS, what purpose does this distinction serve? Is this just standards proliferation, or some sort of parallel development with different priorities?

#fonts […]

0 1 0 0

Hacker News Companion

@hncompanion.com

5 months ago

Font stacks vs. web fonts: Web fonts offer more control & reduce layout shifts. Yet, stacks are vital fallbacks for users disabling web fonts or on slow connections, ensuring content readability. #WebFonts 3/6

0 0 1 0

Jay

@jay52-tx.bsky.social

5 months ago

Should you preload fonts for performance? Preloading fonts can speed up or slow down your site. Learn how it affects FCP/LCP, how Chrome handles preloads, and when to use them for better performance.

Should You Preload Fonts for Performance? — When preloading helps, when it hurts, and the rules to follow || #WebDev #FrontendDev #WebFonts bit.ly/3Vji624

1 0 0 0

flauss

@lwsrc.bsky.social

6 months ago

EGL085 Eigentlich Keyboards – der mechanische Podcast Tippen beim Reden und redend tippen... Tobs ist wieder zu Gast bei „Eigentlich Podcast”. Vor zwei Jahren haben wir über Webfonts gesprochen. In dieser Folge knüpfen wir an das Thema Schriften an, alle...

Tobs ist zurück im Eigentlich Podcast: Statt #Webfonts geht’s diesmal um mechanische #Keyboards. Aufgenommen beim Tippen! Flo besucht Tobs – Cases, Switches und Keycaps. Keyboard-Verkostung mit 8 Modellen: Haptik, Klang, Design im Direktvergleich:
eigentlich-podcast.de/egl085-eigen...

0 0 0 1

Felix Wagner

@floppynotfound.bsky.social

6 months ago

You’re loading fonts wrong (and it’s crippling your performance) Fonts are one of the most visible, most powerful parts of the web. And yet: almost everyone gets them wrong.

How to load #fonts like it's 2025. A short history of #webfonts.

www.jonoalderson.com/conjecture/y...

#webdev

0 0 0 0

Megan Newman

@megannewman99.bsky.social

7 months ago

Avoid custom fonts unless you need them. They kill performance and barely help UX. Stick to system fonts = faster load. #ShopifySpeed #WebFonts

0 0 0 0

Silphium Design LLC

@silphiumdesign.bsky.social

8 months ago

The Best Nature-Inspired Fonts for a Fresh & Organic Design - Silphium Design LLC This post covers the use of and some examples of nature-inspired fonts that you can use in your web design.

Seeking fonts that feel fresh & organic? 🍃 This Silphium Design post, "The Best Nature-Inspired Fonts for a Fresh & Organic Design," shares top picks to bring natural elegance to your website. #NatureInspired #WebFonts #DesignTips #Typography

🔗

0 0 0 0

Leon Chevalier

@speedifypress.com

8 months ago

GitHub - SpeedifyPress/SpeedifyPress: Real-world WordPress performance plugin for developers & agencies. Speedify your sites with expert-grade tools. Real-world WordPress performance plugin for developers & agencies. Speedify your sites with expert-grade tools. - SpeedifyPress/SpeedifyPress

Font preloading with SpeedifyPress: Get those crucial fonts showing up FAST. Details in our README: https://github.com/SpeedifyPress/SpeedifyPress/ #WebFonts #PerformanceFirst #WordPress

0 0 0 0

Eric Maugendre on collectives

@eric.social.coop.ap.brid.gy

8 months ago

Inter Font Update: Don’t rely on Google Fonts for hosting Millions of Google Fonts user experience right now, when a font gets updated and suddenly things … shift. This happened with _Inter,_ when it got replaced by a newer version a few weeks ago. In this video and article I’ll tell you what changed, how you can fix it on your website or in your Figma projects, and what you should be aware of to prevent these kinds of problems in the future. ## Inter got updated In a recent post, I talked about the changes that came with the update to version 4 of the popular typeface _Inter_. Along with significant improvements, like optical sizing, _Inter 4.0_ also changed its flavor quite a bit by replacing the slanted italics with true italics. So I assumed that it would not simply be replaced on Google Fonts, because this might result in text reflow at best and in a loss of functionality at worse. **But I was wrong.** It happened. So if you made use of the variable font and the **slant axis,** you won’t be able to access it anymore with the newer version. And you most likely will see a different spacing for smaller size. Now, what happened to millions of websites that use Google Fonts to host _Inter,_ will happen in **Figma projects** as well. At the time of writing this article, it still shows the previous version of _Inter_ , but this could change any moment as Figma irregularly updates the Google Fonts catalog. Then, you most likely will see shifts in your UI or web designs too. ## What can you do about it There are two options: #### 1. Embrace the changes And update your designs when needed. There are quite some improvements when it comes to setting text in larger sizes. #### 2. Go back to the older version You can also download _Inter_ version 3 and **self-host the fonts** for your website. This also brings plenty of advantages when it comes to performance and GDPR compliance. If you want to learn how to do it, there is a great video by Kevin Powell that shows you step by step. ## What to do when it updated in Figma If _Inter_ has already been updated in Figma and you want the previous version, yon need to download and install it locally. This way, it will override the Google Fonts available in Figma and access the local fonts. I tested this with another Google Font that I installed locally. But note that everyone else who works on this project **has to do the same,** or otherwise they will see the current version of it. ## Don’t rely on Google Fonts Because what happened with _Inter_ now, already happened and will happy again to other fonts hosted on Google Fonts. If you want consistency, self-host your fonts. Fonts are software, so oft course they can and should be updated when things change or get improved. But situations like these remind us to be thoughtful about or type choices and how we host them. ### Typographic power to your inbox * **Font Friday:** I recommend one typeface per week, free fonts included. * **Type Tuesdays:** articles & videos that up your design game. * **Join 2900+ typography enthusiasts,** unsubscribe anytime. Your email Your first name Just a sec … Subscribe #### Hooray, typographic glory on its way! Check your inbox (or spam folder) to confirm your subscription. ## Embrace flexible design It also shows that we should not rely on a specific typeface and pixel-perfect typesetting. Digital design has to be flexible for accessibility and many other reasons. Sometimes a font does not load, other times it gets replaced by the user agent, and text size will often be adjusted too. We as designers sure have influence, but on the web, the user should have the control. * * * **How did you experience the update?** Tell me in the comments below!

Don’t rely on Google Fonts for hosting type: https://pimpmytype.com/google-fonts-hosting/

#dependencies #webdesign #fonts #typography #frontend #ui #webFonts #GoogleFonts #Google

1 0 0 0

DEV Community

@dev.to.web.brid.gy

10 months ago

Mastering Custom Fonts in WordPress: A Comprehensive Guide # Mastering Custom Fonts in WordPress: A Comprehensive Guide Adding custom fonts to your WordPress website can enhance its visual appeal and make it stand out. In this guide, we'll walk you through the process of incorporating custom fonts into WordPress. Whether you're a beginner or an intermediate user, you'll find practical tips and solutions to make your site unique and visually engaging. ## 👉 Start your website with Hostinger – get fast, secure hosting here 👈 Where to Download Fonts for WordPress? Finding the right fonts for your WordPress site is the first step. There are numerous resources available where you can download fonts that are suitable for both commercial and personal use. Here are some popular options: * **Font Squirrel:** Offers a wide array of free fonts, many of which are licensed for commercial use. * **Google Fonts:** Provides over 900 font families, ensuring you find the perfect match for your site. * **Edge Web Fonts by Adobe:** Features a vast collection of web fonts to choose from. * **Envato Elements:** A premium source with almost 28K+ fonts available. * For personal projects, consider **Fonts.com** , **DaFont** , and **1001 Free Fonts** . ## Converting Fonts to a Web-Friendly Format Not all fonts are web-friendly right out of the box. Here’s how you can convert fonts to ensure compatibility across different browsers: Before converting fonts, it’s essential to understand the various formats available: * **Open Type Fonts (OTF):** Widely used and supported by most browsers. * **True Type Fonts (TTF):** A popular format developed by Microsoft and Apple. * **Web Open Font Format (WOFF):** Recommended by the World Wide Web Consortium (W3C) for web pages. * **WOFF 2.0:** Offers better compression than its predecessor but lacks support in some browsers. * **Embedded OpenType Fonts (EOF):** Compact and supported by all major browsers. If you're unsure about your font’s compatibility, use the Web Font Generator to convert your font to a web-friendly format. Follow these steps: * Visit the Web Font Generator. * Upload your font by clicking the _Upload Fonts_ button. * Agree to the terms by checking the box in the _Agreement_ section. * Download the converted font by clicking the _Download Your Kit_ button. The downloaded zip file will contain fonts in WOFF and WOFF 2.0 formats, along with CSS files and a demo HTML page. ## How to Add Custom Fonts to WordPress? Adding custom fonts to WordPress can be done in two main ways: manually or using plugins. Let’s explore both methods. ### How to Manually Add Fonts to WordPress If you prefer not to use plugins, you can manually add fonts by uploading the font to your hosting account and editing your theme’s CSS file. Here’s how: * Download the desired font to your computer and extract it if necessary. * Upload the font file to your WordPress host, placing it in the wp-content/themes/your-theme/fonts directory. Use an FTP client like FileZilla or Hostinger 's File Manager. * In the WordPress admin area, navigate to _Appearance → Theme file editor_ and open the style.css file. * Add the following code, replacing the font-family and URL with your font details: @font-face { font-family: 'Your Font Name'; src: url('http://your-site.com/wp-content/themes/your-theme/fonts/YourFontFile.ttf'); font-weight: normal;} To apply the font to a specific element, add the following code to your style.css file: .site-title { font-family: 'Your Font Name', Arial, sans-serif;} ### How to Add Fonts in WordPress using Plugins Plugins offer a simpler way to add custom fonts. Here are some popular options: * **WP Google Fonts:** Allows you to apply Google fonts to specific CSS elements. Install the plugin and access the Google Font Control Panel through your dashboard to select and configure fonts. * **Easy Google Fonts:** Enables real-time font previews and adjustments without coding. Access font settings via _Settings → Google Fonts_ . * **Use Any Font:** Supports multiple font formats and lets you assign fonts to custom elements. After installation, get a free API key to upload and verify fonts. Using plugins can simplify the process and provide additional customization options without editing code directly. Looking to elevate your WordPress site even further? Check out Hostinger for reliable hosting solutions that enhance your website's performance and user experience. ## Conclusion You now know how to find, convert, and add custom fonts to WordPress, whether manually or with plugins. The right font can significantly enhance your site's aesthetic and align with your branding. Feel free to experiment and find what best suits your website's style. If you have any questions about adding fonts to WordPress, share them in the comments below. For more information, visit our WordPress guide. ## WordPress Custom Font FAQ Here are some frequently asked questions about adding custom fonts to WordPress: ### How Do I Add a Custom Font to WordPress Without Plugins? To manually add custom fonts, upload the font to your hosting account using an FTP client, and modify your theme’s CSS file as described earlier. ### Can I Use Any Font on WordPress? Yes, you can use any font, but ensure it aligns with your website’s theme and style. Check font compatibility for optimal performance. ### Is It Illegal to Use the Same Font as Another Company? The legality of using fonts depends on licensing and copyright laws in your country. Always ensure you have the right to use a font for your intended purpose. Domantas G. leads the content and SEO teams at Hostinger with innovative ideas and a unique approach. In his free time, he enjoys web development and traveling. ## Starter-Pack HTML Section Change Font SizeWordPress SliderWordPress Image SizesWordPress Page BuildersWordPress Custom Fields 👉 Start your website with Hostinger – get fast, secure hosting here 👈 ### 🔗 Read more from MinimaDesk: * How to Disable xmlrpc.php in WordPress: A Step-by-Step Guide * The Ultimate Guide to WP-Content: Access, Upload, and Hide Your WordPress Directory * Mastering WordPress: Solving Broken Permalinks Effortlessly * Understanding the WordPress Template Hierarchy: A Beginner's Guide 🎁 Download free premium WordPress tools from our Starter Tools page . 📦 Download your Free WordPress Starter Pack 📌 Originally published at MinimaDesk

0 0 0 0

Jay

@jay52-tx.bsky.social

11 months ago

Atkinson Hyperlegible Font - Braille Institute Read easier with Atkinson Hyperlegible Font, crafted for low-vision readers. Download for free and enjoy clear letters and numbers on your computer!

Free Accessible #WebFonts -- According to estimates, one out of ten people have dyslexia, and 70–80% of people with poor reading skills are likely dyslexic || #WebDev #FrontendDev

0 0 0 0

Local lad

@brightfuturenow.biz

1 year ago

Reimagining Fluid Typography Are we responding to the right inputs?

Seeing as I'm a bit of a techie person I came across this article on "Fluid Typography" for e-devices... I thought to share as its really interesting (if you're into fonts, websites and published electronic documentation)
www.oddbird.net/2025/02/12/f...

#FluidFonts #webdesigm #webfonts

0 0 0 0

Joe Crawford

@artlung.com

1 year ago

How to check if the font has a symbol I have the following css rule in my document font-family: "Trebuchet MS", Tahoma; but I found out that some browsers have Trebuchet MS font without symbols I need (some language with non-latin

Using some of my mana inside ye olde StackOverflow to get an answer to whether a web font can be interrogated as to whether it has a particular character. Already 2 interesting answers added to an older question. #webdev #typography #webfonts stackoverflow.com/questions/90...

0 0 0 0

Pablo Lara H.

@pablolarah.bsky.social

1 year ago

Medium green text "Type Scale Generator" with dark green shadow on light pink background with ornamented letters from The Proper Art of Writing (Kunstrichtige Schreibart) by Paul Franck (1655)

🔴 Type Scale Generator
by Landin.gs
The Type Scale Generator allows you to experiment with different font sizes and ratios to create a balanced type scale.
Export to CSS, SCSS, Tailwind & WordPress.

#webapp #webtools #Typography #webfonts #webdev

landin.gs/tools/type-s...

3 0 0 0

Pablo Lara H.

@pablolarah.bsky.social

1 year ago

Grey text on white background: Modern CSS unlocks some wishful visual treatments. White text on green rectangle: Two Typographic Tricks. Below Black text and image in black and white of dog on white background: D'Amato Dec. 19 2024

📗 Two Typographic Tricks
by Donnie D'Amato
@donnie.damato.design

#typography #webfonts #webdev

blog.damato.design/posts/two-ty...

3 1 1 0

Pablo Lara H.

@pablolarah.bsky.social

1 year ago

Red text on pink background with flower, red berries and spiders: About .notdef: the symbol (not emoji!) that is often an “X” inside a tall rectangle

🍒 About .notdef:
the symbol (not emoji!) that is often an “X” inside a tall rectangle
by Thomas Phinney, Font Detective
@tphinney.typo.social
#Typography #WebFonts #ThomasPhinney

www.thomasphinney.com/2024/12/notd...

1 0 0 0

Pablo Lara H.

@pablolarah.bsky.social

1 year ago

Blue text "Typeset" on pink background with big faded asterisk.

🔵 Typeset
by David Merfield @DavidMerfield
An HTML pre-processor for web typography. Typeset provides typographic features used traditionally in ﬁne printing which remain unavailable to browser layout engines.
#WebTypography #webfonts #webdev

typeset.lllllllllllllllll.com

1 0 0 0

Pablo Lara H.

@pablolarah.bsky.social

1 year ago

🟠 Clamp it! VS Code extension
by Geoff Graffam @geoff@front-end.social at @csstricks@mastodon.social
Feat.:
Silvestar Bistrović (adedicated.dev)
@cita.bsky.social

#VSCode #code #webdev #clamp #webfonts

css-tricks.com/clamp-it-vs-...

1 1 0 0

Pablo Lara H.

@pablolarah.bsky.social

1 year ago

Pink text on green background: Features of your font you had no idea about

🥭 Features of your font you had no idea about
by Oleg Wock @OlegWock@toot.works @OlegWock
Including: #VariableAxes #Alternates #Stylisticalternates #Swashes #Numerals #Smallcaps #Contextualalternates
#Typography #webfonts

sinja.io/blog/get-max...

0 0 0 0

Pablo Lara H.

@pablolarah.bsky.social

1 year ago

Yellow text with orange shadows: Quick guide to web typography for developers. Background image, duotone blue white version of Costumes Parisiens: Grande robe du soir from Journal des Dames et des Modes (1913) fashion illustration in high resolution by George Barbier

🔵🟠🟡 Quick guide to web typography for developers
by OlegWock @OlegWock@toot.works X: @OlegWock
#Typography #WebTypography #webfonts #webdev

sinja.io/blog/web-typ...

2 0 0 0

Pablo Lara H.

@pablolarah.bsky.social

1 year ago

Green text on pink background: Font with Built-In Syntax Highlighting

🍍 Font with Built-In Syntax Highlighting
by Heikki Lotvonen at Glyph Drawing Club
#webfonts #Typography #webdev #css
blog.glyphdrawing.club/font-with-bu...

1 0 0 0

Pablo Lara H.

@pablolarah.bsky.social

1 year ago

Red text on pink background with top image of Coffee website in duotone red pink: Riffing on the latest CSS fit text approach

🟥 Riffing on the latest CSS fit text approach
by Piccalilli @piccalilli_ - @belldotbz
@piccalilli@front-end.social
#webdev #CSS #cssfit #webfonts

piccalil.li/blog/riffing...

0 1 0 0

Pablo Lara H.

@pablolarah.bsky.social

1 year ago

One quarter dark gray background with light grey text: Logo CSS DAY .css-day { date: 'June 6 & 7 2024'; location: 'Amsterdam' } Sponsored by Google @algolia Three quarters white background with black and name in brown text: Problems Solved by OpenType Roel Nieskens Bottom right pixelated sepa picture of Roel.

🟤⚫️ Problems solved by OpenType
Roel Nieskens @PixelAmbacht
CSS Day 2024 @CSSDayConf
#css #webdev #webfonts #Opentype #typography

youtu.be/TreBK-EyACQ?...

0 0 0 0

Pablo Lara H.

@pablolarah.bsky.social

1 year ago

White text on orange background: How to Choose the Font Color Based on the Background

🟠 How to Choose the Font Color Based on the Background
by Louis Liu
#webfonts #contrast #webdev

dev.to/louis7/how-t...

0 0 0 0

Gishu Azami (Yoshi) | 生明義秀

@g-azami.bsky.social

1 year ago

Home | with Google Fonts

Why is this not a hot topic?
Wix Studio allows you to use any web font, including Google Fonts, at your disposal.
#WixStudio #WebFonts #GoogleFonts
azmdesign.wixstudio.io/with-google-...

0 0 0 0

Pablo Lara H.

@pablolarah.bsky.social

1 year ago

White text on dark blue background with shapes on top left and bottom right in light blue, medium pink, light pink and red orange: Font Performance

⬛️🟧🟦 Font Performance
NYC WebPerf Meetup April '24
by Paul Calvano @paulcalvano
#webperf #FontPerformance #webfonts #webdev

www.slideshare.net/slideshow/fo...

0 0 0 0

Pablo Lara H.

@pablolarah.bsky.social

1 year ago

Green text on lialc background: “Multiplexed” Fonts Have a Cool Superpower

🟢🟣 “Multiplexed” Fonts Have a Cool Superpower
by Chris Coyier @chriscoyier at @FrontendMasters
#MultiplesedFonts #webfonts #webdev #css

frontendmasters.com/blog/multipl...

0 0 0 0

Posts tagged #WebFonts