DEVHIDE
Login Or Sign up

How to use cursive letters with Pacifico font?

55 Views Asked by At

The Pacifico font supports many scripts like: Latin Lowercase, Latin Uppercase, Cyrillic Lowercase.. and each one displays a specific cursive glyph.

If I use the font with Cyrillic text, how can I specifically make use of the cursive glyph showed in the image and not just the capitalized д for example, and also not explicitly using italics or slanted letters.

enter image description here

I have downloaded the Pacifico font into static/fonts/ and then tried with:

<html>
<head>
<style>
 @font-face {
     font-family: 'Pacifico'; 
     src:
     local('Pacifico Regular'),
      url('/static/fonts/Pacifico-Regular.ttf format("truetype")');
 }
 .pacifico-font {
     font-size: 5em ;
     font-family:'Pacifico';
 }
</style>
</head>
<body>
<span class="pacifico-font">д</span>
</body>
</html>

But it is still swowing д.

html css fonts truetype google-fonts
Original Q&A
2

There are 2 best solutions below

0
Philippe On BEST ANSWER

Strange behavior, this alternative works fine :

<html>

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">

  <style>
    .pacifico-font {
      font-size: 5em;
      font-family: 'Pacifico';
    }
  </style>
</head>

<body>
  <span class="pacifico-font">д</span>
</body>

</html>

Maybe a problem with the downloaded font or with the declarations syntax, I don't know.

0
herrstrietzel On

Your @font-face syntax has an error:
you must not include the format identifier in the url property

url('/static/fonts/Pacifico-Regular.ttf format("truetype")');

should be

url('/static/fonts/Pacifico-Regular.ttf') format("truetype");

(Doesn't matter if you're using double or single quotes)

@font-face syntax is unforgiving

Even minor typos invalidate the whole rule.

body{
  font-size: 5em ;
}

/* incorrect syntax */
@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  url('https://fonts.gstatic.com/s/pacifico/v22/FwZY7-Qmy14u9lezJ-6D6MmTpA.woff2 format("woff2")');
}

/* correct syntax */
@font-face {
  font-family: 'Pacifico-correct';
  font-style: normal;
  font-weight: 400;
  src: url('https://fonts.gstatic.com/s/pacifico/v22/FwZY7-Qmy14u9lezJ-6D6MmTpA.woff2') format("woff2");
}


 .pacifico-font {
     font-family:'Pacifico';
 }

 .pacifico-font-correct {
     font-family:'Pacifico-correct';
 }
<p class="pacifico-font">д</p>
<p class="pacifico-font-correct">д</p>

Local font sources

Besides, better avoid local() font rules trying to fetch a locally installed font – they tend to fail or may be blocked completely due to browser security setting.

Fonts loaded – relative paths correct?

If you're uncertain: check the browsers's dev tools (network tab/fonts).

If you can't see an entry for the locally hosted font file – there is something wrong with your paths.

Keep in mind the path must be relative to the final output directory of your CSS file (in case ure using a preprocessor like Sass/Scss this can sometimes be confusing).

Preferred font formats

You should also prefer woff2 files due to their improved file compression.
When downloading the font as .ttf via google font UI you get a quite large font file – due to the truetype format but also due to the lack of subsets.
If your page/app provides something like a language switch you may not need to load the full-range glyph support for all languages at once. Instead you may load language dependent subsets on demand (e.g switching between English and Russian)

OTS parsing errors

These error logs you can see in your dev tool console indicate, the font file itself was corrupted at some point. Maybe during a upload process or caused by sub-optimal web-bundler settings (e.g copying font-files not as binary files) See "WebPack custom font loading resulted OTS PARSING ERROR: invalid sfntVersion:".

There are also great helper like "google webfont helper" to retrieve a "font-kit".
Alternatively, you may code your own helper (See codepen example)

Related Questions in HTML

Related Questions in CSS

Related Questions in FONTS

Related Questions in TRUETYPE

Related Questions in GOOGLE-FONTS

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs

Popular Questions

.

Copyright © 2021 Jogjafile Inc.