Skip to content
← Back to Community
I'm having trouble with the custom fonts not showing up
Profile icon
Tubarepl

I've made sure that when i import the fonts.css by linking it into main.css, the import action is at the top. I've used woff format since i read that it loads faster, i've tried moving the fonts file and i've gone over the lines to make sure the syntax is right as well.

I'll use select codes:

The heading should shouw the most noticable change:

div.article-grid div.horizontal h1 { color:#0991A9; font-family:Museo-500, sans; font-size:42px; border-bottom:3px #0991A9 solid; width:auto; text-transform: uppercase; margin:0px 30px 25px 0px; }

This is the relevant code in fonts.css

@font-face { font-family: 'Museo-500'; src: url('fonts/Museo-500.woff') format('woff'), url('fonts/Museo-500.eot#iefix') format('embedded-opentype'), url('fonts/Museo-500.ttf') format('truetype'), url('fonts/Museo-500.svg#Museo-500') format('svg'); }

This is how i'm importing fonts.css into main.css (line 1)

@import url("css/common/fonts/fonts.css");

All the custom fonts are in a folder named fonts which i have put in css/common and also tried to put folder fonts outside.

Voters
Profile icon
FolkusEnormus
Profile icon
Leroy01010
Profile icon
Tubarepl
Comments
hotnewtop
Profile icon
Coder100

Hi, your path is wrong, it's
css/common/fonts.css
you added an extra folder fonts

Profile icon
Tubarepl

@Coder100 Hi there, thanks for the response. I've tried that path too and it still doesn't work

Profile icon
Coder100

oh right, of course, /css/commons/fonts.css forgot a / @Tubarepl

Profile icon
Tubarepl

@Coder100 Nope still no change...
neither with @import url("/css/common/fonts.css");
nor with @import url("css/common/fonts.css");

Profile icon
Coder100

oh, i see the file you are in: ./fonts.css @Tubarepl

Profile icon
Tubarepl

@Coder100 so are you saying i should change it to this :

@import url("./fonts.css");

Profile icon
Coder100