DEV Community: Abdullah Nasir

How to add font family in Next.js | The Modern Way

Abdullah Nasir — Sun, 18 Jan 2026 16:15:12 +0000

For a long time, I struggled to find the "right" way to add custom fonts to a Next.js project. I searched through endless forums and saw different kinds of processes, like the old-fashioned way where you have to download the raw font files, manually move them into a public/fonts folder, and then write messy @font-face rules in your CSS. While that works, it's a headache. It bloats your project size, takes up extra space in your GitHub repo, and usually causes that annoying "flicker" (Layout Shift) where the text jumps around when the page loads.

But there is more simple way from the help you can do the same process in short

1. Initialize the Font

Instead of downloading files, we import the font directly from next/font/google. Next.js will automatically download the font files at build time and host them locally for you. This means no extra space is taken up in your source cod.

Open your app/layout.tsx and set it up outside the component:

import { Poppins } from "next/font/google";

const poppins = Poppins({
  subsets: ["latin"],
  weight: ["400", "600", "700"], 
  variable: "--font-poppins", 
  display: "swap", 
});

2. Inject the Font into your Layout

Now, you need to "inject" that variable into your HTML so the rest of your app (and Tailwind) can see it.

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={`${poppins.variable}`}>
      <body className="antialiased">
        {children}
      </body>
    </html>
  );
}

3. Connect to Tailwind CSS

Next.js provides the font data, but Tailwind needs a "name" to call it by. Open tailwind.config.ts and map a utility class to your new CSS variable.

import type { Config } from "tailwindcss";

const config: Config = {
  theme: {
    extend: {
      fontFamily: {
        poppins: ["var(--font-poppins)", "sans-serif"],
      },
    },
  },
};
export default config;

Why this is better than the "Manual Download" method

Zero Cumulative Layout Shift (CLS): In the old way, text would "jump" when the font finished loading. Next.js 16 automatically adjusts the size of the fallback font so the transition is invisible.
Performance & Privacy: You get the speed of Google Fonts without actually making requests to Google’s servers. Everything is served from your own domain.
Automatic Subsetting: If you only need English characters, Next.js strips out the unused characters from the font file. This can make your font files up to 70% smaller than the ones you download manually.

Now The Final Step the result

export default function Hero() {
  return (
    <h1 className="font-poppins font-bold text-3xl">
      High Performance, Zero Effort.
    </h1>
  );
}

Found this helpful? Let’s build something together!

🚀 Connect with me on LinkedIn: Abdullah

📂 Check out my recent project: Tazakur

📧** Direct Inquiries**: (abdullahnasir.xee@gmail.com)

Deep Linking work Flow how it help me to connect directly to phone systems

Abdullah Nasir — Wed, 07 Jan 2026 06:37:36 +0000

React Native Linking: The Simple Guide to Protocols

Abdullah Nasir ・ Jan 7

#programming #reactnative #linking #expo

React Native Linking: The Simple Guide to Protocols

Abdullah Nasir — Wed, 07 Jan 2026 06:35:53 +0000

In React Native, the Linking module is the built-in interface used to interact with both incoming and outgoing app links. It allows you to open external URLs (like websites) or trigger system-level actions (like making a phone call or sending an email) using specific URL Schemes.

Understanding URL Schemes (Protocols)

Every link you interact with has a Scheme (the part before the
://).
Your phone’s operating system uses this scheme to decide which app should handle the request.

2.Core Methods: openURL vs canOpenURL

Before you try to open a link, it is a best practice to check if the device actually has an app installed that can handle it.

Linking.canOpenURL(url): Returns a Promise that resolves to a boolean. It checks if there is an app installed that recognizes the scheme.
Linking.openURL(url): Attempts to open the link. If it fails (e.g., no email app is set up), it will throw an error.

Code Example: Phone & Email
Here is a reusable function to handle both "Call" and "Email" actions safely.

import { Linking, Alert, Platform } from 'react-native';

const handleExternalLink = async (url) => {
  try {
    const supported = await Linking.canOpenURL(url);

    if (supported) {
      await Linking.openURL(url);
    } else {
      Alert.alert("Error", `Don't know how to open this link: ${url}`);
    }

  } catch (error) {
    Alert.alert("An error occurred", error.message);
  }
};

-  Usage Examples:

<Button title="Call Support" onPress={() => handleExternalLink('tel:+123456789')} />

<Button title="Email Us" onPress={() => handleExternalLink('mailto:hello@dev.com')} />

Key Differences & Properties

tel: vs telprompt: (iOS Only)

_On iOS, if you use tel:, the phone dials immediately. If you use telprompt:, the system shows a confirmation popup first asking the user if they really want to call. Most developers prefer telprompt: for better UX on iPhone.

Email with Parameters
The mailto: scheme can be extended to include a subject and body using standard URL query parameters:

mailto:support@example.com?subject=Help&body=I need assistance