Why do my fonts/layout change when in production? Tried Netlify and Github Pages
Question
I'm trying to host a site on Netlify (or github pages), but for some reason when entering production, the fonts change, as well as some layout issues (See photos)
[
I'm not sure if this issue is due to CSS specificity, or if I need to declare the font-types somewhere; I've already added them to my <head> tag, and my css file has them each imported.
I've created a codepen with the code: https://codepen.io/aladin94/pen/BaowqgX (keep in mind the images and layouts will differ). Any ideas?
The font imports:
<link href="//db.onlinewebfonts.com/c/146c398456e6a22b45102120ae8a7679?family=Narcissus"
rel="stylesheet" type="text/css"/>
<link href="//db.onlinewebfonts.com/c/21400dc679986534519c638136d62dbf?family=Rage+Italic"
rel="stylesheet" type="text/css"/>
1 answers
solution1
2 2020-05-02 05:26:34
I guess, that your production site blocks the insecure font.
See my browser console print:
Mixed Content: The page at '...' was loaded over HTTPS, but requested an insecure font
http ://db.onlinewebfonts.com/t/146c398456e6a22b45102120ae8a7679.woff
. This request has been blocked; the content must be served over HTTPS.
You can change the behaviour for the specific font or you have to find a secure font for your case.
Have you tried this link:
<link href="https://db.onlinewebfonts.com/c/146c398456e6a22b45102120ae8a7679?family=Narcissus" rel="stylesheet" type="text/css" />
EDIT : As already mentioned in the comment section, you can find the sources in your developer mode of your browser. In my case, I am using chrome.
Try to download your needed files/ sources and afterwards you can try to upload it to your server environment.
I guess, it's not really a programming question/ solution because it's more related to library handling or security setup.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.