Adding Fonts

With a Subscription, click any sentence in the script to jump to that part of the video!

Another common CSS need is a custom font. My favorite source for fonts is https://fontsource.org where you can search through a huge number of fonts that have various open source licenses.

For example, one popular font is "Inter". Here, you can download the file, and it gives some install instructions, which are interesting: it uses the font as an npm package.

We're not using npm, but we can use npm packages: and we know how.

Head over to jsDelivr to find it. Notice that the package is called @fontsource-variable/inter. I'm going to search for @fontsource/inter. And... just like with Bootstrap, there's the CSS file! For the font nerds out there, if you looked inside of this file, you would see that this is the 400 weight, and it's the file you would normally use if you installed this via npm and imported it.

Copy that URL and paste it in the browser to see what it looks like.

Variable Fonts?

Notice that, back on FontSource, they recommend using a package starting with @fontsource-variable. Variable fonts are cool: instead of needing a different font file for each font weight like 400 vs 800, a single variable font can contain all the weights, while still keeping the file size reasonably small. FontSource starting offering variable fonts quite recently.

Change the URL to use @fontsource-variable. This is what we actually want. Copy it, head back over to base.html.twig, add <link rel="stylesheet">, and paste.

            
            75 lines
            
            templates/base.html.twig
        
                                                    ... lines 1 - 2
                            
                <head>
        
                                                    ... lines 4 - 11
                            
                    {% block stylesheets %}
        
                        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/inter@5.0.3/index.min.css">
        
                                                    ... lines 14 - 15
                            
                    {% endblock %}
        
                                                    ... lines 17 - 21
                            
                </head>
        
                                                    ... lines 23 - 75

Thanks to this, we can go over to app.css, inside of the body tag, and say font-family: 'Inter Variable', adding sans-serif as a backup.

            
            25 lines
            
            assets/styles/app.css
        
                                                    ... lines 1 - 12
                            
            body {
        
                                                    ... line 14
                            
                font-family: 'Inter Variable', sans-serif;
        
            }
        
                                                    ... lines 17 - 25

Let's check it! Watch this text closely. Boom! It updated thanks to that new font.

If you're wondering why I didn't just search for the @fontsource-variable package on jsDelivr originally, fair question: that's what I would normally do. jsDelivr is a mirror of every NPM package. However, due to a bug in the API of npmjs.com, right now, these new "variable" packages can't be found in the search. The bug has apparently been fixed - so hopefully the issue will melt away soon.

The point is, jsDelivr does have the package we need, we just can't find it via the search. It's kind of annoying, but should be temporary.

Next: Let's make our CSS a bit fancier by introducing Tailwind. That's going to be especially interesting because Tailwind requires a build step.

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=8.1",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "babdev/pagerfanta-bundle": "^4.0", // v4.2.0
        "doctrine/doctrine-bundle": "^2.7", // 2.10.0
        "doctrine/doctrine-migrations-bundle": "^3.2", // 3.2.4
        "doctrine/orm": "^2.12", // 2.15.2
        "knplabs/knp-time-bundle": "^1.18", // v1.20.0
        "pagerfanta/doctrine-orm-adapter": "^4.0", // v4.1.0
        "pagerfanta/twig": "^4.0", // v4.1.0
        "stof/doctrine-extensions-bundle": "^1.7", // v1.7.1
        "symfony/asset": "6.3.*", // v6.3.0
        "symfony/asset-mapper": "6.3.*", // v6.3.0
        "symfony/console": "6.3.*", // v6.3.0
        "symfony/dotenv": "6.3.*", // v6.3.0
        "symfony/flex": "^2", // v2.3.1
        "symfony/framework-bundle": "6.3.*", // v6.3.0
        "symfony/http-client": "6.3.*", // v6.3.0
        "symfony/monolog-bundle": "^3.0", // v3.8.0
        "symfony/proxy-manager-bridge": "6.3.*", // v6.3.0
        "symfony/runtime": "6.3.*", // v6.3.0
        "symfony/stimulus-bundle": "^2.9", // v2.9.1
        "symfony/twig-bundle": "6.3.*", // v6.3.0
        "symfony/ux-turbo": "^2.9", // v2.9.1
        "symfony/web-link": "6.3.*", // v6.3.0
        "symfony/yaml": "6.3.*", // v6.3.0
        "twig/extra-bundle": "^2.12|^3.0", // v3.6.1
        "twig/twig": "^2.12|^3.0" // v3.6.1
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.4", // 3.4.4
        "symfony/debug-bundle": "6.3.*", // v6.3.0
        "symfony/maker-bundle": "^1.41", // v1.49.0
        "symfony/stopwatch": "6.3.*", // v6.3.0
        "symfony/web-profiler-bundle": "6.3.*", // v6.3.0
        "zenstruck/foundry": "^1.21" // v1.33.0
    }
}

Edit on GitHub

TRACK

Symfony 6 >

COURSE

AssetMapper: Modern JS with Zero Build System

Adding Fonts

Keep on Learning!

Variable Fonts?

Leave a comment!

What PHP libraries does this tutorial use?

	... lines 1 - 2
	<head>
	... lines 4 - 11
	{% block stylesheets %}
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/inter@5.0.3/index.min.css">
	... lines 14 - 15
	{% endblock %}
	... lines 17 - 21
	</head>
	... lines 23 - 75

	... lines 1 - 12
	body {
	... line 14
	font-family: 'Inter Variable', sans-serif;
	}
	... lines 17 - 25