How to load a custom font locally into a symfony project?

Question

I want to load IMG Plex font into a symfony project with webpack encore.

I imported it into my scss file:

@import "../fonts/IBM_Plex_Sans/IBMPlexSans-Regular.ttf";

But nothing changed. Only the cdn worked for me.

And yes I did not forgot to restart yarn encore dev --watch

Hope somebody can help.

99% the relative path is just not matching to where the files get stored, use an absolute path like `/public/build/fontsIBM_Plex_Sans/IBMPlexSans-Regular.ttf` — john Smith, Jan 24 '20 at 00:09
Oh - webpack dont build that. I have only the IBM_Plex_Sans folder in my assets directory ... — Slowwie, Jan 24 '20 at 17:21
Ok - now I added the fonts folder to my public folder in symfony and did it like u said. Did not work. Instead - webpack gives me now an error and said File to import not found or unreadable: /public/fonts/IBM_Plex_Sans/IBMPlexSans-Regular.ttf. — Slowwie, Jan 24 '20 at 17:35

score 0 · Answer 1 · answered Jan 25 '20 at 17:15

0

You dont need to import ttf files in your sccs. In scss you have to import @font-face:

An example:

@font-face{
font-family: 'IBM_Plex_Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/IBM_Plex_Sans/IBMPlexSans-Regular.ttf');
}

Better yet, add a few other font formats (woff,woff2,eot etc.)

answered Jan 25 '20 at 17:15

Vladimir Tarkhanov

130
3

Did not work. I tried it the path is correct. Also phpstorm accept it. @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; src: url('../fonts/ibm-plex-sans-v7-latin/ibm-plex-sans-v7-latin-regular.eot'); /* IE9 Compat Modes */ src: local('IBM Plex Sans'), local('IBMPlexSans'), – Slowwie Jan 27 '20 at 20:29

score 0 · Answer 2 · edited Mar 12 '21 at 16:23

0

You can store your font files in

asset/styles/fonts/YOURFONTNAME/YOURFONT.ttf

With

@font-face {
    font-family: 'YOURFONTNAME';
    src: 
        url('./fonts/YOURFONTNAME/YOURFONT.ttf') format('truetype'),
    font-weight: 400;
    font-style: normal;
}

edited Mar 12 '21 at 16:23

Tyler2P

2,324
26
22
31

answered Mar 11 '21 at 15:50

Hu̅gø

9
2

How to load a custom font locally into a symfony project?

2 Answers2