In the older XAMPP version does the CSS element '@font-face' work perfect as follows:
@font-face
{
font-family: ffn;
src: url("../oth/handalfabet.eot");
src: url("../oth/handalfabet.eot?iefix") format("embedded-opentype"),
url("../oth/handalfabet.woff") format("woff"),
url("../oth/handalfabet.ttf") format("truetype"),
url("../oth/handalfabet.svg#nha") format("svg");
}
#ffn
{
font-family: ffn, Monospace;
font-size: 3em;
}
But it does not work in the lastet XAMPP version. According to the access.log it should work proper:
127.0.0.1 - - [17/Jan/2018:21:28:12 +0100] "GET /devrije2/Programmering/Talen/CSS/CSS-voorbeelden?webvrs=tst HTTP/1.1" 200 62844 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0"
127.0.0.1 - - [17/Jan/2018:21:28:13 +0100] "GET /devrije2/tst/css/webcss.css HTTP/1.1" 304 - "http://localhost/devrije2/Programmering/Talen/CSS/CSS-voorbeelden?webvrs=tst" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0"
127.0.0.1 - - [17/Jan/2018:21:28:13 +0100] "GET /devrije2/prd/css/cssexmlcl.css HTTP/1.1" 200 7976 "http://localhost/devrije2/Programmering/Talen/CSS/CSS-voorbeelden?webvrs=tst" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0"
127.0.0.1 - - [17/Jan/2018:21:28:13 +0100] "GET /devrije2/prd/img/cssexmbim.png HTTP/1.1" 304 - "http://localhost/devrije2/Programmering/Talen/CSS/CSS-voorbeelden?webvrs=tst" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0"
127.0.0.1 - - [17/Jan/2018:21:28:13 +0100] "GET /devrije2/prd/img/webnvgbkg.jpg HTTP/1.1" 304 - "http://localhost/devrije2/tst/css/webcss.css" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0"
127.0.0.1 - - [17/Jan/2018:21:28:13 +0100] "GET /devrije2/bsx/img/webpnt.gif HTTP/1.1" 304 - "http://localhost/devrije2/tst/css/webcss.css" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0"
127.0.0.1 - - [17/Jan/2018:21:28:13 +0100] "GET /devrije2/prd/img/webmst.jpg HTTP/1.1" 304 - "http://localhost/devrije2/tst/css/webcss.css" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0"
127.0.0.1 - - [17/Jan/2018:21:28:13 +0100] "GET /devrije2/bsx/img/websqr.gif HTTP/1.1" 304 - "http://localhost/devrije2/tst/css/webcss.css" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0"
127.0.0.1 - - [17/Jan/2018:21:28:13 +0100] "GET /devrije2/prd/img/cssexmgrd.gif HTTP/1.1" 304 - "http://localhost/devrije2/Programmering/Talen/CSS/CSS-voorbeelden?webvrs=tst" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0"
127.0.0.1 - - [17/Jan/2018:21:28:13 +0100] "GET /devrije2/prd/img/cssexmarw.gif HTTP/1.1" 304 - "http://localhost/devrije2/Programmering/Talen/CSS/CSS-voorbeelden?webvrs=tst" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0"
127.0.0.1 - - [17/Jan/2018:21:28:13 +0100] "GET /devrije2/prd/img/cssexmbtf.png HTTP/1.1" 304 - "http://localhost/devrije2/Programmering/Talen/CSS/CSS-voorbeelden?webvrs=tst" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0"
127.0.0.1 - - [17/Jan/2018:21:28:13 +0100] "GET /devrije2/prd/oth/handalfabet.woff HTTP/1.1" 404 2941 "http://localhost/devrije2/prd/css/cssexmlcl.css" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0"
127.0.0.1 - - [17/Jan/2018:21:28:13 +0100] "GET /devrije2/prd/oth/handalfabet.ttf HTTP/1.1" 304 - "http://localhost/devrije2/prd/css/cssexmlcl.css" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0"
However, when I entered the webaddress 'localhost/devrije2/prd/oth/handalfabet.ttf', it does work fine!?
Perhaps I need to adapt the APACHE's HTTP configuration, but what?
@font-face{
font-family: ffn;
src: url(/devrije2/prd/oth/handalfabet.eot);
src: url(/devrije2/prd/oth/handalfabet.woff) format("woff"),
url(/devrije2/prd/oth/handalfabet.ttf) format("truetype"),
url(/devrije2/prd/oth/handalfabet.svg#nha) format("svg");
}
#ffn{
font-family: ffn, Monospace;
font-size: 3em;
}