Discover the best fonts websites created by professional designers. Get inspired and start planning your perfect fonts 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

Fonzrelli - electric motorbikes and scooters! 

At Fonzarelli, we’re on a mission to increase the uptake of electrifying two-wheel machines. Lightning acceleration. Zero emission. We’ve built a range of rides to suit any rider, whether you’re looking for an easy commute or an adrenalin rush, we now have the bike for you. We are Australian riders, innovators and builders. Join our Fonz family. Join the future.

FONZ

Fonzarelli

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

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

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

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

No Code Flow

Hi, I currently mostly work as an UX-designer. But if I do websites I love to do it with Webflow. <3
Therefore I wanted to share my current portfolio as an inspiration with you guys! 👋

Lucas Pilzen Portfolio

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

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

Bookmark

Big Font Slider

Inspired by @ultimateuiux 

080 - 100 days of @webflow interactions

#80 Big Font Slider

WebFolks

I bet you’ll want to disable Ligatures.

Font-Ligatures

Font Ligatures

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

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

Discover fonts websites built by the Webflow community

Discover fonts websites built by the Webflow community