After activating a Let's Encrypt certificate to use HTTPS on my website, I can not load the @ font-faces and the icons are seen correctly. I'm using Firefox and Chrome in their latest versions for testing.
Originally (when everything worked with HTTP) I had the following in my CSS file:
@font-face {
font-family: 'cl-xxx';
src: url('../fonts/cl.eot');
src: url('../fonts/cl.eot') format('embedded-opentype'),
url('../fonts/cl.woff') format('woff'),
url('../fonts/cl.ttf') format('truetype'),
url('../fonts/cl.svg') format('svg');
}
I have CSS in the "public / css /" folder and the sources in "public / fonts /" and by putting the following URL in the browser, I get the source file: link
If I can load the icon fonts, but placing @ font-face {...} in the header of the HTML document, not in the style sheets as I was doing, and it only works if I use relative or absolute routes with "http", with "https", no.
What have I tried?
1. Al minificar el CSS se eliminan las comillas dentro de url, p.e. url('../fonts/cl.eot'); queda url(../fonts/cl.eot);
Las restaure manualmente.
2. Copiar el directorio de fuentes en el directorio CSS modificando la ruta relativa:
@font-face {
font-family: 'cl-xxx';
src: url('fonts/cl.eot');
src: url('fonts/cl.eot') format('embedded-opentype'),
url('fonts/cl.woff') format('woff'),
url('fonts/cl.ttf') format('truetype'),
url('fonts/cl.svg') format('svg');
}
3. Usar rutas adsolutas para las fuentes, tanto con "http" como con "https", p.e.
@font-face {
font-family: 'cl-xxx';
src: url('http://www.cambialibros.es/public/fonts/cl.eot');
src: url('http://www.cambialibros.es/public/fonts/cl.eot') format('embedded-opentype'),
url('http://www.cambialibros.es/public/fonts/cl.woff') format('woff'),
url('http://www.cambialibros.es/public/fonts/cl.ttf') format('truetype'),
url('http://www.cambialibros.es/public/fonts/cl.svg') format('svg');
}