While developing my website using Bootstrap 4, I encountered an issue with the custom font (GeosansLight) I applied to the entire website through the body's CSS attribute. The problem arose when the default Bootstrap form inputs appeared too light to be noticeable with the custom font.
Specifically, on one page, I attempted to use a Bootstrap form template with placeholders for each field. However, the input format was too light to be legible. I experimented with changing the font back to the default setting and even tried making the letters bold using the font-style: bold attribute, but only the form labels were affected.
HTML:
<form>
<div class="row mt-2">
<label for="inputName" class="col-sm-2 col-form-label">Full Name</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputName" placeholder="Enter your full name">
</div>
</div>
</form>
CSS:
<style type="text/css">
input {
font-weight: bold;
font-size: 17px;
}
label {
text-align: center;
}
form {
font-weight: bold;
font-size: 15px;
}
body {
font-family: GeosansLight;
}
@font-face { font-family: GeosansLight; src: url('GeosansLight.ttf'); }
form input {
font-weight: bold;
font-size: 20px;
}
</style>
I had expected a standard Bootstrap form input field that was dark enough for readability, but the outcome was a very light, almost faded appearance with a placeholder. Even when typing in the placeholder, the resulting text remained light.
What changes should I make to darken the form input so that it is not affected by the custom font?