I tried using a Adobe Typekit font with the following method. I add this to my default_head_blocks.xml inside my <head> tag:

<script src="https://use.typekit.net/oti3nzu.js" src_type="url"/>
<script src="js/typekit_loader.js"/>

the javascript file looks like this:

try {
    async: true 

Then, in <theme_dir>/web/css/source/_variables.less I changed the font name to this:

//  Fonts
@font-family-name__base: 'niveau-grotesk';
@font-family__base: @font-family-name__base, @font-family__sans-serif;

Now, when I deploy my static content and reload the site (cache cleared) the font isn't applied. When I check the sourcecode I see this:

body {
color: #333;
font-family: "niveau-grotesk", 'Helvetica Neue', Helvetica, Arial,  sans-serif;
font-style: normal;
font-weight: 400;
line-height: 1.42857143;
font-size: 1.4rem;

The only thing I can think of that goes wrong is that in _typography.less it says:

    @family-name: @font-family-name__base,
    @font-path: '@{baseDir}fonts/opensans/light/opensans-300',
    @font-weight: 300,
    @font-style: normal

So the font-path is still the one that leads to opensans, it is just named differently in CSS now because of my changes inside the _variables.less file, right? But what should I put as path? I mean it's an online font and there is no path available to an actual font file.

What should I do?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.