In my Django project, I am utilizing pure CSS and Bootstrap. Everything appears as expected when I test it on my local machine. However, once deployed, the appearance changes. The font looks different from how it did before deployment:
After deploying to Digital Ocean, the font width seems to have increased. Here is a snapshot of its current look post-deployment:
You can view the live version at . Below is the HTML code snippet of the head section:
{% load staticfiles %}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get Facebook Stuff</title>
<link rel="stylesheet" href="{% static 'downloader/pure-market.css' %}">
<link rel="stylesheet" href="{% static 'downloader/baby-blue.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'downloader/bootstrap/css/bootstrap.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'downloader/bootstrap/css/bootstrap.min.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'downloader/bootstrap/css/bootstrap-responsive.css' %}"/>
<link rel="stylesheet" href="{% static 'downloader/style.css' %}">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.1/pure-min.css">
<script src="http://use.typekit.net/ajf8ggy.js"></script>
<script>
try { Typekit.load(); } catch (e) {}
</script>
</head>
I suspect the issue lies with this particular JavaScript segment:
<script src="http://use.typekit.net/ajf8ggy.js"></script>
<script>
try { Typekit.load(); } catch (e) {}
</script>
If you have any suggestions or solutions, your help would be greatly appreciated. Thank you in advance.