The CSS and HTML code is malfunctioning, the font style is not being implemented properly

When attempting to execute this CSS/HTML code (specifically in webkit browsers), it seems to not be functioning as expected. The issue lies with the font in the input box, which is failing to apply the Lato font:

<html>
    <head>
        <link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet'
        type='text/css'>
        <title>Simple Search</title>
        <meta name="apple-mobile-web-app-capable" content="yes"
        />
        <link rel="apple-touch-icon-precomposed" href="../ss.png" />
        <meta name="viewport" content="width = device-width, user-scalable = no, initial-scale = 0.8">
        <style>
            .box {
                padding:20px;
                width:290px;
                box-shadow:0px 1px 3px -1px #c3c3c3;
                background-color:white;
                color:gray;
                font-family:Lato;
                text-align:left;
            }

        </style>
    </head>
    <body bgcolor="#f5f5f5">
        <center>
            <br>
            <div style="position:relative;width:342px;">
                <form action="searchcompleted.php" style="display:inline;">
                    <input name="q" value="Search, or tap the camera" class="box" style="border:0;outline:0;width:340px;color:#A0A0A0;padding-top:15px;padding-bottom:15px;"
                    onfocus="if (this.value == 'Search, or tap the camera') {this.value = '';}"
                    onblur="if (this.value == '') {this.value = 'Search, or tap the camera';}">
                </form>
                <img src="http://i45.tinypic.com/30vkbhj.jpg" style="position:absolute;top:0px;left:278px;opacity:0.4;height:30px;padding:15px;padding-right:17px;"
                onclick='void(0);document.getElementById("thisone").click();'>
                <form style="display:inline;" action="http://www.simplesearch.com/simpleocr/post.php"
                method="post" enctype="multipart/form-data" id="sniff">
                    <input accept="image/*" type="file" style="display:none;" id="thisone"
                    onchange='document.getElementById("scan").style.display="block";' name="photo">
                    <div onclick='void(0);document.getElementById("sniff").submit();' style="position:absolute;top:65px;left:195px;background-color:white;border:0;box-shadow: 0px 1px 3px -1px #C3C3C3;padding:20px;color:#0EBFE9;padidng-left:25px;padding-right:25px;z-index:4;display:none;font-family:Lato;"
                    id="scan">Touch to scan</div>
                </form>
            </div>
            <br>
            <div class="box"></div>
    </body>

</html>

Thank you so much for your help!

Edit: Check out the revised version here:

Answer №1

experiment with different font styles

 @font-kit
{
font-family: NewFontStyle;
src: url('.otf');
} 

Answer №2

It seems like the issue is not related to a specific font but actually pertains to the font size itself. Typically, web browsers automatically apply a slightly reduced font size within input boxes compared to regular text. By inspecting the page using developer tools in Chrome, you'll notice that one of the styles applied is font: -webkit-small-control, which dictates both the font family and size.

To ensure that the text inside the input box matches the overall document body (or its surrounding elements), you can simply add this CSS rule:

input { font-size: 100%; }

Answer №3

Please input the font-family rule as follows: font-family: 'Open Sans'; Remember to use single quotes.

Answer №4

font family 'lato' not available in CSS so pls import the 'Lato'using this code. download the ttf and eot file of Lato.

@font-face
{
font-family: FirstFont;
src: url('.ttf'),
     url('.eot'); 
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to connect an image to initiate a video in fullscreen mode?

Hey there, I'm currently learning about html5 in school and I have a question. I have created a credits button (image) and what I want is for a video to overlay everything on the website when that button is clicked. I initially considered redirecting ...

Animate CSS Grid to dynamically fill the viewport on top of current grid elements

Please note that I am specifically seeking vanilla JS solutions, as jQuery is not compatible with this project I have a grid structure that is somewhat complex: body { margin: 0; height: 100vh; text-align: center; } .grid-container { ...

The height of each Bootstrap column is equal to the height of its corresponding

I am trying to prevent the column height from being equal to the row height in Bootstrap. Here is my code snippet: <div class="row justify-content-center text-center"> <div class="col-sm-3"></div> <div class="col-sm-9"></d ...

Control input for filtering and searching using Bootstrap

My goal is to create a search and filter user input field. I found an example on an old bootstrap page that showcases exactly what I need, but I'm facing some issues with displaying the results. Here's the Bootstrap example page. The search bar ...

Designing rectangular divs with arrow elements

As I delve deeper into the world of CSS, my experiments have been yielding exciting results! From creating popup boxes to playing around with CSS styling, it's been a fun journey so far. However, I'm eager to challenge myself and expand my knowle ...

Instructions on how to assign a class number to a div matching the cookie number

Cookie: $(document).ready(function(){ //hide all divs for the purpose of this example, you should have them hidden with your CSS //$('.picture.1').hide(); //check if the cookie is already set if ($.cookie("currentDiv") === ...

Navigation through Image Filters

Everything seems fine with my code, but when I click on the navigation links, they direct me to index.html or the landing project instead of filtering the images. How can I modify the links to properly filter the images? This is the Javascript and html co ...

Is using CSS as an HTML attribute considered poor practice?

I've been noticing an increasing trend of combining HTML, CSS, and JavaScript together in web development. However, I was taught to keep them separate with HTML linking to the sources/scripts. While using the style attribute in HTML is sometimes acce ...

The dropdown menu items spill out beyond the confines of the container

I'm currently facing some challenges and struggling to find a solution. Unfortunately, I haven't been able to find any guidance on this issue. Important: To view the output, click on "Run snippet" and make it full screen by clicking on the hamb ...

What is the method to move the h1 tag slightly to the right?

Whenever I use HTML's <h1>Heading Here</h1> tag, the heading appears too close to the left side of the browser window. I would like it to shift slightly towards the right side (not centered though). How can I achieve this adjustment? Can ...

Adjust div height to match the dynamic height of an image using jQuery

I'm facing an issue with my image setup. It has a width set to 100% and a min-width of 1024px, but I can't seem to get the 'shadow' div to stay on top of it as the window size changes. The height of the shadow div also needs to match th ...

Ways to create a smooth transition in element height without a known fixed target height

Is it possible to create a smooth height transition for an element when the target height is unknown? Replacing height: unset with height: 100px allows the animation to work, but this presents a problem as the height needs to be based on content and may v ...

Displaying a URL inside a div upon clicking a specified href link in an Angular application

After hours of searching on various search engines, I am still unable to find the solution to my problem. My goal is to display the URL in a div once it has been clicked using $http for dynamic links. Here's an example of what I'm trying to achi ...

Ways to delete an attribute from a DOM element with Javascript

My goal is to use JavaScript to remove an attribute from a DOM node: <div id="foo">Hi there</div> First, I add an attribute: document.getElementById("foo").attributes['contoso'] = "Hello, world!"; Then I attempt to remove it: doc ...

Guide on coding in Node.js to showcase an image on a web browser

Is there a way to set a local image file as the background for my browser page? I am experiencing an issue where the image does not display when I run my app index.js file through the node.js terminal and visit localhost:3000, even though it works fine whe ...

Can Wireframe be applied to a 3D gltf model within an HTML document?

I am currently working on achieving a specific design concept, which can be viewed at the following link: To guide me through this process, I have been following a tutorial available here: While I have successfully implemented the model and created mater ...

Ensure that JavaScript finishes the animation before transitioning to the next step

Currently, I am developing a basic rotator that cycles through three pieces of advice on a website. My goal is to create a smooth fade in and out effect by adding and removing classes. While testing in the JavaScript debugger, everything runs smoothly as i ...

Utilizing 'moment.js' for implementing a personalized date stamp in node.js

Is there a way to properly utilize moment.js for saving a created date into mongoDB through a form? Currently my code looks like this: var blogSchema = new mongoose.Schema({ title: String, image: String, body: String, created: {type: Date, ...

Ensure the footer remains at the bottom of the page even with changing

I am encountering an issue with positioning a footer under dynamic content displayed in a div named txtresults. The div is updated with HTML following a query made with an input value, as shown in this example on JsFiddle: JsFiddle Currently, I am struggl ...

Is there a way to determine if my great-grandfather has a class attribute that includes a specific word?

Looking for some assistance with my HTML code snippet: <div class='one two three and etc.'> <div> <div> <div class='my_target'> </div> </div> ...