Leveraging the @font-face feature along with fonts sourced from fontsquirrel

As I embark on creating my very first website, I find myself delving into the world of fonts from Font Squirrel.

However, a challenge arises as I realize that not all the fonts I downloaded from the site are easy to use.

The real struggle comes when dealing with CSS code for font families that have multiple styles, like LM Mono 10 Regular and Special Elite.

My CSS code for Special Elite works perfectly:

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

AND

.fifth {font-family: 'specialelite'; font-weight: normal; font-size: 16px; color:black;}

But when it comes to implementing this format for any style in the LM Mono 10 family, I hit a wall...

After two days of trial and error, I'm reaching my breaking point... Is the issue with how I'm referencing the font family or am I messing up the URLs? Please, I'm desperate for help - could you provide an example of the code in response?

Let's try to tackle "Latin Modern Mono Light 10 Regular" together...

I just can't seem to crack the code...

Thank you in advance,

Alexandros.

cssfont-facefont-family

Answer №1

I finally got the font to work! Take a look at my code where I placed all the files in the HTML root folder.

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8>

  <title>Font Test</title>


  <style>
  @font-face{ 
    font-family: 'MyWebFont';
    src: url('lmmono10-regular-webfont.eot');
    src: url('lmmono10-regular-webfont.eot?iefix') format('eot'),
         url('lmmono10-regular-webfont.woff') format('woff'),
         url('lmmono10-regular-webfont.ttf') format('truetype'),
         url('lmmono10-regular-webfont.svg#webfont') format('svg');
  }

  p { font-family: 'MyWebFont'; }
  </style>

</head>

<body>
<p>My Test</p>
</body>
</html>

Hope this solution works for you!

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

Having trouble with Bootstrap v4 dropdown menu functionality?

For some reason, I cannot get the dropdown menu to work in my Bootstrap v4 implementation. I have tried copying and pasting the code directly from the documentation, as well as testing out examples from other sources on separate pages with no luck. &l ...

javascripthtmlcss

Hexagonal Shape with Rotating Border Gradient in CSS

Looking to create a hexagon shape with a rotating gradient border. Here's an example GIF for reference: https://i.stack.imgur.com/Ah1AO.gif I attempted using CSS only but the use of :after and :before tags proved limiting since they rely on border s ...

htmlcsssvg

Finding your site's First Contentful Paint (FCP) can be done by analyzing the

After doing some research on Google insights, I came across information about FCP. However, I'm still unsure about how to determine my site's FCP and other relevant metrics. If anyone could provide me with more information or share detailed link ...

javascripthtmlcss

The button component is unresponsive

An app was developed with a component containing signin and signup buttons on the right side. However, there is an issue where the Sign up button is not clickable. Below is the code snippet for the component => import React from "react"; expo ...

cssreactjsbuttonclickable

Tips for enhancing the color saturations of cells that overlap in an HTML table

My goal is to enhance the color of overlapping cells in my HTML tables. For instance, when I click on cell 2, the .nextAll(':lt(5)') method will change the class of the next 4 cells. https://i.stack.imgur.com/mwv8x.png Next, clicking on cell 3 ...

javascriptjqueryhtmlcss

Added the .active state to the menu navigation successfully, however the active color was not implemented

My primary navigation menu is managed by WordPress and can be seen below. I aimed to modify the active state when a user clicks on a link in the menu by adding background-color and color for styling purposes. Although changing the background-color upon cl ...

jqueryhtmlcsswordpress

CSS: Styling different <a href> tags to appear uniform within identical size containers

I currently have some links displayed on my webpage. These links are encapsulated within a border and have a background set for them, essentially creating a box around each one. <!DOCTYPE html> <style> a { background: #DDD; border: #BB ...

css

What is the best way to align the bottom of an anchor element with the bottom of an SVG element when positioning them together

I am working on a test website where I am trying to create an interesting visual layout. My goal is to place an SVG image in the background, with an anchor element and other elements laid out above it. The challenge I am facing is aligning the bottom of th ...

htmlcsssvganchor

How can I make the arrows work on a secondary slider with EasySlider1.7?

I finally managed to get 2 sliders working on my page after reading through several other tutorials. However, I am facing an issue with the Prev & Next arrows on the second slider as they don't seem to work properly. I inherited this page from someon ...

javascriptjqueryhtmlcsseasyslider

The onclick event for a Bootstrap .btn-group checkbox functions correctly in JSFiddle, but encounters issues when tested

The toggle button group in the form below utilizes Bootstrap and checkboxes. I am looking to track click events on the checkbox inputs. <html> <head> <title>Example: Bootstrap toggle button group</title> <meta charset="UTF-8 ...

javascriptjquerycsstwitter-bootstrapbootstrap-4

Instructions for removing a class using the onclick event in JavaScript

Is there a way to make it so that pressing a button will display a specific class, and if another button is pressed, the previous class is removed and a new one is shown? Thank you for your assistance. function myFunction() { document.getElementById ...

javascriptcss

What is the best way to toggle the visibility of a background image within a carousel?

As a beginner in j-query, I am struggling with creating a slider image carousel using a full background image. Most of the solutions I found online require a fixed width for all pictures to slide smoothly. However, I believe there might be a way to use an ...

jqueryhtmlcss

Troubles with CSS in MUI Component Integration

How can I successfully implement a vertical timeline using Material UI in React? I've set it up, but the CSS isn't functioning as expected. Is there an error in my implementation? List of Dependencies: "@emotion/react": "^11.11.1& ...

cssmaterial-ui

What is the method for presenting text based on the chosen Select Option?

I attempted to achieve this using hrefs and ids, but it did not meet my requirements. This is the desired format: div.selectcountry { margin-bottom: 10px; font-family: arial; font-size: 12px; } div.countrydepartment { font-family: ...

javascriptjqueryhtmlcss

Maintain the alignment of content in the center while expanding background images

I am looking to create a website with a split background effect, similar to the design on this site . I want to maintain a content container width of 980px while achieving this look. I attempted to accomplish this by adding height and background color pro ...

htmlcssbackground-color

Choose an element by its specific data attribute

I have come across this html code and I am attempting to assign a new class to it using the data attribute: <p class="form-row form-row-wide" data-child-field="child_has_jacket"> </p> Even after trying with jQuery : jQuery( ...

javascriptjquerycsscustom-data-attribute

The pull-right feature in Bootstrap 4 seems to be malfunctioning when used in a

Currently, I am utilizing bootstrap 4 for my project. I have encountered an issue with the navbar not aligning correctly on the page, and I'm struggling to identify the root cause of this problem. Is there someone who can provide assistance in resolvi ...

htmlcssbootstrap-4

Jquery scroll animation not reaching the intended position when scrolling upwards

While developing a new feature for my music player, I encountered an issue with centering the track/div upon clicking in the scrollable parent div. Sometimes it doesn't scroll to the center as intended and instead scrolls erratically to the top of the ...

jqueryhtmlcss

Manipulating toggle buttons using CSS and jQuery

Check out this jsfiddle to see my attempt at creating a toggle switch in the form of a mute button. The toggle button shows the current setting: mute or unmute When hovered over, it displays the alternative setting However, I am encountering an issue wh ...

javascriptjquerycsshover

What is the functionality of CSS radio tabs?

Can anyone provide a breakdown of how the final section of this code operates? Specifically: [type=radio]:checked { } [type=radio]:checked ~ .content { z-index: 1; } I am brand new to CSS and wanted to experiment with creating interactive CSS tabs, whi ...

htmlcsstabsradio-button