Incorporate personalized fonts onto your website

After downloading the Arimo font from Google Fonts, I decided to create a master page and a stylesheet for it. Here is the code I wrote:

@font-face{
    font-family:"Arimo";
    src: url('../Fonts/Arimo/Arimo-Regular.ttf'),format('truetype');
}
body, html{
    font-family:Arimo; 
}

However, when I created an .aspx page and linked the master page, the font did not get recognized. Surprisingly, when I used the following Google link:

<link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet" />

it worked perfectly. Can someone explain why the first method didn't work and provide a solution?

Answer №1

Seems like you may have overlooked uploading the font you downloaded onto your server. Make sure to upload or add the font to the Fonts/Arimo/ folder in order for it to properly display on your webpage.

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

How do I create a Bootstrap 4 multi-level navigation bar that drops to the right on the third level?

clickable dropdown hover dropdown.jpg Source: Is there a way to create a dropdown menu that opens to the right like the clickable version, rather than to the left like the hover dropdown in the provided example? I'm open to other solutions as long ...

What is causing the mouse to malfunction when interacting with this HTML form?

What is causing the mouse to not work with the form on this specific webpage? The issue here is that the mouse does not seem to be functioning correctly when attempting to interact with the input boxes within the Form. Upon clicking any of the input boxe ...

Creating a clickable table cell in CSS that maintains vertical alignment of text within

Is there a way to make an entire table cell clickable while still vertically aligning the text inside it? One possible solution is to set the link to display:block and adjust the line height. However, this method may not work if the text spans two lines a ...

The iframe remains unresponsive and fails to resize as needed

I am facing an issue while trying to embed an iframe into one of my websites. It seems that the responsiveness is lost and it does not scale properly on mobile devices. You can see the issue here. Interestingly, when I place the same iframe on a plain HTM ...

Adjusting the width of images in Bootstrap is proving to be a challenge

Check out this website. There is an advertisement image below the navigation bar. I am having trouble adjusting its width. I want the image to expand and fill the empty white space. I've attempted using relative and absolute positioning, but the width ...

Animating divs one by one using CSS3 with delays

I am experimenting with animating three separate divs one by one, each moving down 50px as a test. Here is the SCSS code I am using: .action { margin: 20px 0; text-align: center; transform: translate(0,0); transition: ...

Having trouble with Gulp JS and CSS minification where existing minified files cannot be replaced

I've hit a roadblock in trying to resolve my search and google issue. My current challenge involves Gulp and cssmin. I can't seem to pinpoint the cause of an error. My aim is to have both the original CSS files and their minified versions in the ...

Ways to create a self-contained video viewer

Is it possible to create a self-contained video player similar to jwplayer or the YouTube video player using just HTML, CSS, and JavaScript? I know that I can build a video player by utilizing the video tag along with some custom javascript and css, but ho ...

The styling in CSS does not accurately reflect its relationship to the parent

My code includes a div with the ID of "outer" nested inside a parent div with the ID of "Container". I'm attempting to adjust the properties of the outer div relative to its parent, meaning its width, height, and other attributes should be based on th ...

What is the best way to overlay an image on two divs/containers simultaneously?

I've been tasked with creating a web mockup featuring a transparent PNG image overlaying two divs in multiple rotations. I've used Bootstrap 4.1 to structure the site, utilizing containers, rows, and cols. <section class="one"> <!-- ...

Switch Picture on Active List Item

I've implemented a two-tab content slider specifically for the mobile section of my website. Users can click on the linked image within the <li> element to load the corresponding content. My goal is to have the image change color when in an "act ...

Tips on navigating the scroller vertically as the user interacts with a selected div by scrolling up and down

On my webpage, I have various div elements displayed. Each div has the options to move it up or down using the buttons labeled "UP" and "Down". When a user selects a div, they can then use these buttons to adjust its position. I am looking for a way to au ...

Why is my <a> element not functioning properly?

I'm encountering a small issue with my first HTML website. The hyperlinks in the "about me" section are not clickable, yet those in the drop down menu are functioning properly. Any thoughts on why this might be happening? If you'd like to take a ...

Potential Issue with CSS General Sibling Selector

It seems like I have encountered a potential bug with the General Sibling Selector. When I use p ~ div, the selector does not work as expected. However, when I replace p with the specific class name text_paragraph, it works fine. You can view my code and f ...

Bring your images to life with a captivating 3D hover effect

I am looking to achieve a similar effect using JavaScript instead of just pure CSS like the example provided. I'd prefer not to use SCSS either, just sticking to CSS would be great. Please check out this CodePen for reference. .picture-container ...

Tips for adjusting font size automatically to fit within its parent container every time

On my blog, the post titles are displayed in a div with a video playing in the background. The length of the title varies, ranging from 2 words to over 20 words. When the title is too long, it may overflow from its parent container where the video is playi ...

Navigate div containers interchangeably

Take a look at what I made: https://jsfiddle.net/1qsoL695/ This is the HTML code: <div class="container"> <div id="select"> <div>ONE</div> <div>TWO</div> <div>THREE</div> &l ...

When an input field is added to an HTML form, all elements positioned below it automatically inherit its attributes

I have a unique combination of HTML and CSS code that creates an impressive login form: <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Prepare to be amazed...</title> <l ...

Swapping out DIVs with jQuery

Currently, I am working on a project for a client where I need to create a sortable biography section using jQuery. Initially, I had a setup with just two bios (first person and third person) which was functioning perfectly: $("a#first").click(function() ...

Achieve visibility of sibling <div> without the need for JavaScript by utilizing the :checked CSS pseudo class

I've been attempting to implement the technique demonstrated in this article, but I'm struggling to achieve the desired effect of revealing new elements after a radio button is selected. .reveal-if-active { opacity: 0; max-height: 0; ove ...