Discover the best font websites created by professional designers. Get inspired and start planning your perfect font web design today!

Design Direction 008
Clone and Re-use these 5 unique text effects. 

How To Use Video
https://www.youtube.com/watch?v=nWuhiJK7-Gw

THANK YOU. 
Here's to 2020.

Joseph Berry® - Text Effects

Joseph Berry Text Effects

Memberstack

It's a cloneable FAQ section! There's not much to describe.

Cloneable FAQ

free-faq

Experimental site that demos z-axis scroll interactions using div blocks. Images and fonts blur when moved forwards or backwards on the z-axis but div blocks don't! Thanks for looking! :-) Jan 2022: z-axis transforms and perspective now a bit broken :-(

Quanto Font

Quanto

Recreation of: https://webflow.com/website/Open-Studio

1. To change the background-image go into the embed-code (inside the designer) and search and change the URL of the following:

bg = loadImage("https://i.postimg.cc/DwTMdBjn/Download.png")

2. To change the text that is being displayed go into the embed code (inside the designer) and search and change the following string saying "Get in touch" to whatever you wish.

  points = font.textToPoints('Get in touch', .....
}

Font-Distortion Effect on Hover

Font-Distortion

Flow Keeper is the perfect website for Webflow designers and no-code developers who want to easily locate and sort over 1500+ tools, inspiration, typography and more resources.

Any feedback would be appreciated. Thank you!

Flow Keeper

Flow Keeper · 1500+ resources for Webflow

method zero

Method Zero by Pinkman is launching a new product where the guys will offer 3(!) design concepts to choose from and will build you up to a 6-block site in just 7 days and $1.5k.

Lite Method

Method Zero | Lite

The weight, color, scale, and rotation of the divs react with your mouse positioning.

Another one in my journey of learning code, particularly JS!

⚠️ YesCode: Code-heavy project! ⚠️

My take on SuperHi's reactive variable font tutorial:
https://library.superhi.com/posts/how-to-make-reactive-type-as-seen-on-the-airbnb-cereal-site

Which was inspired by Airbnb's page:
https://airbnb.design/cereal/scale/weight

Feel free to clone and enjoy!

Reactive Variable Font - Javascript

Reactive Variable Flower - Javascript

Preset to give you a starting point for your next website. Build in the "Perfect fourth" font scale.

Free to use, with love from Okayokay.dk

Perfect Fourth Font-Scale Preset

Perfect Fourth (Font-scale) Preset

Add a fun animated wave inside text using a small snippet of CSS. I used Alvaro Trigo's Codepen (https://codepen.io/alvarotrigo/pen/PoKMyzO) and was inspired by Van Schneider's Blog (https://vanschneider.com/blog/).

Sign up for the lesson: www.webflowtips.com/b/how-to-animate-a-wave-inside-text

If you have any questions feel free to comment.

P.S 🙂 🙌 - Like or follow if this was useful for you.

27 of 50

Wave animation inside text

Wave Text Animation

Bookmark

Big Font Slider

Inspired by @ultimateuiux 

080 - 100 days of @webflow interactions

#80 Big Font Slider

Azwedo

Hey designers 👋

We're super excited to announce FontInLogo.com with you today! 🤩Demystify famous brands font with FontInLogo.

FontInLogo helps you search and find a World Brands (and other) Logo with their font details.

A tool for everyone who tried to design a logo 

The idea of FontInLogo came up from our dealing team(@ azwedo.com) lecturing about the importance of well-known fonts. We started collecting data and ended up with a platform that lets you search brands and find out what font they are using. Fun right?

The platform is FREE to search for any Logo and find any Font used by world brands.

🥳Yes, anyone can join the FontInLogo community
So whether you’re new to design or consider yourself a pro — your contribution to submit a logo font(that’s not in our list) is welcome here.

We've built the platform from Zero to Hero in just 7 days, this is becoming our routine of building valuable products

Give it a try - Can't wait to see what you think!

Fontinlogo.com

Font in Logo

Font In Logo

A minimal two page  portfolio with Work, About and Email link as the primary nav. Just focus on the work highlights and key achievement to sell your service and expertise.

The CSS is not the best. Sorry.

Rey's Portfolio Project

Minimal Dark Portfolio Template

Devanesa is a font family based on the fascia of the school in my mother's village. Completely free for personal and commercial use, it tries t bring awareness about the seriousness of depopulation in the rural area of Spain.

TFG final

Devanesa: a font designed to bring awareness about depopulation in Spain

Nick Randle Portfolio Site

WebFolks

I bet you’ll want to disable Ligatures.

Font-Ligatures

Font Ligatures

We’ve got something important to tell you about fonts and we think about it. And.. it’s not great

fuckhelvetica

F*ck helvetica

Font Inspiration For Web Designers. A curated library of professional fonts forged to inspire designers, developers and content creators.

Fontks

Fontks | Font Inspiration For Web Designers

Small site showcasing techniques reviewed during December 2022 Flow Party about Fonts: including font features, Color fonts, layered fonts, variable fonts.

Discover font websites built by the Webflow community

Discover font websites built by the Webflow community