I just finished creating this test document
<h1> test <h1>
After that, I experimented with CSS3 and wrote the following code
@font-face {
font-family: 'hello';
src:url('/fonts/HelloStockholm-Alt.otf')
font-style: normal;
font-weight: 100;
}
h1 {
font-family: hello;
font-weight: 100;
}
Here is the font that I used for this project
I'm hoping some of you can give me feedback and suggestions on this design
The missing semicolon is causing an issue at the end of your code.
src:url('/fonts/HelloStockholm-Alt.otf');
UPDATE
I have corrected the file type from .otf to .ttf after testing it with my local copy of your project. Make sure to update this in your code as well.
If your HTML file is outside of the fonts folder, remove the '/' from the font source path. I also noticed that the font file was named as 'HelloStockholm-Regular' when I downloaded it.
src:url('fonts/HelloStockholm-Regular.ttf');
Don't forget to close the h1 tag properly:
<h1> test </h1>
I hope these corrections help you out. Best of luck!)
Make sure to eliminate the '/' in front of fonts directory
@font-face {
font-family: 'greetings';
src:url('fonts/GreetingCity-Alt.otf');
font-style: normal;
font-weight: 100;
}
h1 {
font-family: 'greetings';
font-weight: 100;
}
I am working on a page design that requires an Infinite Scrolling Background Image with a looping effect to create the illusion of infinity. On top of this background, a content card is displayed. However, the image extends beyond the page width on smaller ...
Below is an image showcasing the desired change: https://i.sstatic.net/mnUUq.png Currently, the page layout consists of two main columns: a sidebar on the left with rows, and the main body on the right, formatted in a 3x9 grid. My goal is to have the firs ...
Currently, all buttons have a hovering effect, but I only want one button to behave this way. I need two buttons to immediately redirect to another page upon clicking, without any hover effect. The CSS styling code has been provided below: #wrapper { ...
html file: <select ng-model="shipping" ng-options="shipping.shipping for shipping in shipAddress"> <option value=''>--Select Address --</option> </select> <form name="shippingForm" class="form-horizontal" role="form" ...
When hovering, the output always displays as "1IPSUM". However, adding a ':before' element with 'content:"1"' results in the output before hover being "11" The desired output is: while hovering, display "IPSUM" Fiddle Link: https://j ...
I am encountering an issue with a menu div that starts off with opacity set to 0 and visibility hidden. The purpose is for this div to become visible when clicking on another div (a menu that sticks to the top of my page, toggle-able via click). Everythin ...
In simple terms, my objective is to have two buttons on a page where "1" is displayed when the first button is pressed and "2" is displayed when the second button is pressed. This functionality works fine with radio inputs, but when I incorporate button la ...
Within the HTML code, I am attempting to refresh the following div: <select name="test[]" id="test" multiple required class="select2"> @foreach($tests as $s) ...
Despite trying numerous similar solutions, none of them have proven effective for my issue. Within a form, users can input an unspecified amount of select options that can be added as needed using AJAX. My goal is to post this array to a PHP page via AJAX ...
I created a webpage with a navigation bar that has links which scroll to different sections on the page. I added a hover animation to the links using the code below: .navbar-default .navbar-nav li a:hover, .navbar-default .navbar-nav li a:active { box ...
.ccw--steps { margin: 10px auto; position: relative; max-width: 500px; } .ccw--step-dot { display: inline-block; width: 15px; border-radius: 50%; height: 15px; background: blue; border: 5px solid #e8e8e8; position: relative; top: -8p ...
I'm currently developing a Phonegap app and I am trying to steer clear of jqm in my project. I find that the css is causing some issues with the html code. As a workaround, I can transition between pages using: window.location = "profiles.html"; How ...
When clicking on the elements with classes .next-arrow and .previous-arrow in this SSCCE, it hides and shows several elements with the class .item, four at a time (with four visible on the screen simultaneously). The desired effect is to animate the showi ...
How can I determine if the fullscreen mode is active using the HTML5 fullscreen API with Chrome and Angular 4.x? I have developed an Angular component and included the following @HostListener: @HostListener('document:webkitfullscreenchange', ...
During my work on an angular project, I decided to implement bootstrap CSS and js for styling. However, after completing the project, I noticed that the bootstrap was not functioning correctly. I found that when I used the CDN link in the project, the bo ...
Does anyone know how to automatically click a button on a page when it loads? I attempted using this JavaScript code, but it didn't work. <a href="javascript:Clickheretoprint()" id="print"> <script type="text/javascript"> $(document).rea ...
I am working with an HTML file that consists of around 100 elements. Using jQuery in my JavaScript file, I have created a variable to store all elements present in the HTML document. Additionally, I have another variable specifically for text nodes withi ...
I am attempting to create a CSS-only text link to video slider within our Umbraco CMS. Due to the limitations of TinyMCE WYSIWYG, I am restricted in the amount of code I can use as it will strip out most of it. So far, I have developed a basic CSS slider ...
I am interested in incorporating the unique “piece of valuable flair™” from MathOverflow onto my website. The issue I am facing is that I want my webpage to comply with XHTML5 standards, meaning it should be served with the MIME type application/xht ...
I have an animated SVG that pulses, and while it works in most browsers, it does not function properly in IE. Is there a way to make this animation work in IE without using an animated GIF as a workaround? Check out the code on CodePen <svg version=" ...