Nie mogę zimportować cziocnki ttf

0

Pobrałem czcionkę Bariol, wkleiłem ją do folderu Fonts, w CSSie dodałem poniższy kod i niestety nie działa. Wpisuję a {font-family: BariolReg;} i nie działa. Jednak jak wrzucam stronkę na serwer, port 80 to działa, czcionka jest zmieniona. Co mogę zrobić, żeby widzieć tą czcionkę lokalnie, bez potrzeby pracowania na serwerze?

@font-face {
font-family: BariolBold;
src: url(../fonts/Bariol_Bold.otf);
}
@font-face {
font-family: BariolLight;
src: url(../fonts/Bariol_Light.otf);
}
@font-face {
font-family: BariolReg;
src: url(../fonts/Bariol_Regular.otf);
}
@font-face {
font-family: BariolRegIt;
src: url(../fonts/Bariol_Regular_Italic.otf);
}
body{
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
0

A jaka jest nazwa tego fontu? Bariol? Spróbuj bez tych sufiksów regular, bold:

a {font-family: Bariol}
0

Czcionka wysłana bez odpowiednich nagłówków HTTP musi pochodzić z tego samego źródła (origin) co strona - w przypadku serwera jest to cała (sub)domena, a w przypadku systemu plików tylko zawartość folderu ze stroną - nie możesz odwoływać się do ../coś.

Możesz umieścić w tym samym folderze, możesz zainstalować w systemie i używać local() przed url(), możesz załadować z serwera np. Google, który w nagłówkach pozwala na zdalne ładowanie.

Poza tym warto przekonwertować te czcionki na np. WOFF zamiast używania formatów zoptymalizowanych pod lokalną instalację a nie transfer przez sieć, dających wielkie pliki.

0

Nie no, można w ścieżkach używać ../ – to z czym się nie spotkałem nigdzie, to podanie ścieżki bez apostrofów/cudzysłowów. Spróbuj tak jak niżej:

@font-face {
  font-family: BariolBold;
  src: url('../fonts/Bariol_Bold.otf');
}

Na swojej stronie mam z ../ i działa globalnie, bez problemów.

0
furious programming napisał(a):

Nie no, można w ścieżkach używać ../ – to z czym się nie spotkałem nigdzie, to podanie ścieżki bez apostrofów/cudzysłowów. Spróbuj tak jak niżej:

@font-face {
  font-family: BariolBold;
  src: url('../fonts/Bariol_Bold.otf');
}

Na swojej stronie mam z ../ i działa globalnie, bez problemów.

Działa, chyba to była kwestia apostrofów. Dziękuję.

1 użytkowników online, w tym zalogowanych: 0, gości: 1