Why does the font on my website appear altered compared to the font in the ttf/woff files?

This is an example of the font's appearance.
Here's how the font appears in the .ttf file format.
And this is the visual representation of the font on my website.

#top {
    margin:             30px 30px 0px 150px;
    border:             3px solid maroon;
    text-align:       center;
    height:             130px;
    background:     url(text/dumbledore.gif) right no-repeat, url(text/gandalf.gif) left no-repeat, url(text/tenor.gif) center;
}

@font-face {
    font-family: 'Beyond Wonderland';
    src: url('fonts/BeyondWonderland.eot');
    src: url('fonts/BeyondWonderland.eot?#iefix') format('embedded-opentype'),
        url('fonts/BeyondWonderland.woff2') format('woff2'),
        url('fonts/BeyondWonderland.woff') format('woff'),
        url('fonts/BeyondWonderland.ttf') format('truetype'),
        url('fonts/BeyondWonderland.svg#BeyondWonderland') format('svg');
    font-weight:  normal;
    font-style:   normal;
}

h1#title-text {
  font-family:  'Beyond Wonderland';
  border:       none;
  font-size:    450%;
  width:        100%;
  text-shadow:  1px white;
  color:        black;
  text-align:   center;
  padding:      20px 0px 20px 0px;
  margin:       auto;
}
    <div id="top">
        <h1 id="title-text" title="You are viewing the home page">Welcome to the Erevrast Home Page!</h1>
    </div>

cssfont-face

Answer №1

When using the text-shadow property, it's important to note that it affects all aspects of the font, including any subtle details or imperfections in the design. To eliminate a 1-pixel white shadow from your text, consider removing the rule text-shadow: 1px white;.

Answer №2

Defining the src of the font twice in CSS is unnecessary. By separating it with commas, you can display a fallback font if the primary one fails to load. For example:

src: url(nonexistentfont.ttf), Arial;

In this case, "Arial" will be displayed if the other font cannot be loaded.

Consider the following code snippet: 

#top {
    margin: 30px 30px 0px 150px;
    border: 3px solid maroon;
    text-align: center;
    height: 130px;
    background: url(text/dumbledore.gif) right no-repeat, url(text/gandalf.gif) left no-repeat, url(text/tenor.gif) center;
}

@font-face {
    font-family: 'Beyond Wonderland';
    src: url(fonts/BeyondWonderland.eot), url(fonts/BeyondWonderland.eot?#iefix) format('embedded-opentype'), url(fonts/BeyondWonderland.woff2') format('woff2'), url('fonts/BeyondWonderland.woff') format('woff'), url('fonts/BeyondWonderland.ttf') format('truetype'), url('fonts/BeyondWonderland.svg#BeyondWonderland') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1#title-text {
  font-family:  'Beyond Wonderland';
  border:       none;
  font-size:    450%;
  width:        100%;
  text-shadow:  1px white;
  color:        black;
  text-align:   center;
  padding:      20px 0px 20px 0px;
  margin:       auto;
}
<div id="top">
    <h1 id="title-text" title="You are viewing the home page">Welcome to the Erevrast Home Page!</h1>
</div>

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 CSS rule that can alter the appearance of links once they have been clicked on a different webpage?

Just starting out here. Imagine I have 4 distinct links leading to the same webpage - is there a way to modify the properties of the destination page depending on which link was clicked? For instance, clicking on link1 changes the background color of the d ...

javascripthtmlcssfrontend

What is the best method for positioning two forms in a vertical arrangement?

I'm looking to integrate a Login form in HTML within my C# project. Here's what I have so far: However, as you can see, the layout is not very aesthetically pleasing. I'm struggling to align the elements in a more visually appealing way. My ...

c#htmlcss

Issue with dynamically adjusting flex box width using JavaScript

Currently, I am developing a user interface that heavily relies on flexbox. The layout consists of a content area and a sidebar that can be toggled by adding or removing a specific class. Whenever the sidebar is toggled, the content area needs to be manua ...

javascripthtmlcssfirefoxflexbox

Problem with displaying fonts in web browsers

I decided to create a React App using the Material UI library, but I wanted to customize it by changing the default font from Roboto to Overpass. I successfully imported the fonts using their library. <link rel="preconnect" href="https:// ...

htmlcssreactjsmaterial-uigoogle-fonts

Is there a way to shift this div to the bottom and incorporate some quirky pop-up squares?

I am struggling to figure out how to move this div to the bottom. Additionally, I want to create temporary pop-up squares (simple divs) in random directions that will disappear after 50ms. My attempt to float this box to the bottom did not yield the desir ...

jquerycss

The tooltip being displayed is plain and lacks any design elements

When I hover over my a element, only a simple tooltip appears without any styling, unlike what is shown in the Bootstrap documentation. (I am creating the a element using JavaScript) HTML <!DOCTYPE html> <html lang="en"> <head> ...

javascripthtmlcssbootstrap-5jquery-ui-tooltip

series of lines including <ListItemText>

https://i.sstatic.net/L8FUC.png I have been using Material-ui with react. Currently, I am working on creating a list in React that contains long text. However, when the text is too long, it is displayed as a single line which is not what I want. I would ...

cssreactjsmaterial-ui

Ideas for displaying or hiding columns, organizing rows, and keeping headers fixed in a vast data table using jQuery

My data table is massive, filled with an abundance of information. Firstly, I am looking to implement show/hide columns functionality. However, as the number of columns exceeds 10-12, the performance significantly decreases. To address this issue, I have ...

javascriptjqueryhtmlcssjquery-ui

Empty space to the left of the vertical navigation bar

I'm struggling to get rid of the white space on the left side of my vertical navigation bar. I've attempted setting padding-left to 0 on my main navigation bar. This is my first time creating a navigation bar, so if you notice any semantic issu ...

csshtml

Add a new row to the table when a dropdown option is selected, and remove the row when deleted. Ensure that the row is only added

Here is my specific requirement: I need a table with a default row containing a dropdown menu in the first column. When an option is selected from the dropdown, a new table row should be added with the same content as the main row and a delete button for ...

javascriptjqueryhtmlcss

Exploring the engaging section of interconnected images featuring rounded edges

I'm currently working on a unique widget that can be found at this link: http://codepen.io/JonnyNineToes/pen/zGYxwV This widget features an image that reveals additional information when clicked, with the extra info sliding out from behind the image. ...

htmlcsscss-shapes

Creating a sliding bottom border effect with CSS when clicked

Is there a way to animate the sliding of the bottom border of a menu item when clicked on? Check out the code below: HTML - <div class="menu"> <div class="menu-item active">menu 1</div> <div class="menu-item">menu 2</ ...

javascriptjqueryhtmlcss

Looking for assistance with hiding the dropdown icon in the <Select> component of material-ui framework

Currently, I am utilizing the Select component from material-ui. According to the documentation of material-ui, it is possible to customize the CSS of components by using the tag sx={{ ... }}. My goal is to style the component with a className of '.Mu ...

cssreactjsmaterial-ui

Use jQuery to swap out every nth class name in the code

I am looking to update the 6th occurrence of a specific div class. This is my current code <div class="disp">...</div> <div class="disp">...</div> <div class="disp">...</div> <div class="disp">...</div> < ...

javascriptjqueryhtmlcss

Is there a way to remove the initial number entered on a calculator's display in order to prevent the second number from being added onto the first one?

I am currently in the process of developing a calculator using HTML, CSS, and JavaScript. However, I have encountered an issue with my code. After a user inputs a number and then clicks on an operator, the operator remains highlighted until the user inputs ...

javascripthtmlcssfrontendcalculator

My HTML Won't Recognize the CSS File

Despite trying various paths and browsers, I am unable to link my CSS file to my HTML file. When inspecting the page elements and checking under resources, the CSS file does not appear. Here is a snippet of my HTML: <html> <head> <meta ...

htmlcss

Linking text to specific spot on image

I am seeking a solution to anchor a text input box to a specific spot on an image. Although I can achieve this using CSS, the problem arises when I resize my window and the alignment of the input box is lost. While I want to allow some resizing of the win ...

htmlcss

Show concealed elements above everything else

I've encountered an issue with my custom dropdown list as it displaces other elements when it appears. I want it to overlay on top of everything else, similar to the default select behavior. Despite trying to set position: relative; and z-index:100;, ...

javascriptjqueryhtmlcss

concealing components during screen adjustments

There are 3 identical <div>s available: <div class="box">Hello World!</div> <div class="box">Hello World!</div> <div class="box">Hello World!</div> I need these <div>s to ...

htmlcssbootstrap-4

Seeking assistance with my personal portfolio project - any takers?

I'm facing an error on a coding challenge that says: "The height of the welcome section should be equal to the height of the viewport." I have set it to 100vh but I'm unsure how to resolve it. Here is the HTML code: <header> <nav id=& ...

htmlcss