Struggling to locate the src/site/globals/site.variables file to customize the font-family in Semantic UI React. Is there an alternative method to achieve this?

I've been attempting to modify the overall font-family for my application, but so far, I haven't had any luck.

Since I'm working with Semantic-UI-React, I initially thought that could be the issue. However, when I tried to locate src/site/globals/site.variables (which other solutions have mentioned) in order to adjust the global variables, I discovered that these files are not present within the Semantic-UI-React node module. I also experimented with using !important on both the #root of my application and the

.app</code that wraps around all components and deeper levels as well, but it only affected the content within my Semantic Modal.</p>

<p>I imported the fonts in <code>frontend_react/public/index.html

<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="stylesheet" href="/styles.css" >
<link href="https://fonts.googleapis.com/css?family=Cinzel:700,900" rel="stylesheet">

<style>
  @import url('https://fonts.googleapis.com/css?family=Cinzel:700,900');

  #root {
    font-family: 'Cinzel', serif !important;
  }
</style>

<title>Three Seeds Tarot</title>

I then referenced the font in /App.css. I applied it to the body, html selector in the same way, as well as the page selector, but without success.

.App {
  text-align: center;
  background-image: url('http://2.bp.blogspot.com/-kX_5_Cqch4g/UmBAsMV4krI/AAAAAAAADjA/XEJnfAq1Dsg/s1600/ProtectionKamea300dpi(a3).jpg');
  font-family: 'Cinzel', serif !important;
}

Here's the render function for my /App.js component:

render() {    
    const user = this.props.user

    return (
      <div className='App'>

        <div id='nav-bar'>
          <NavBar/> 
        </div>

        <div className='page'>

          {!user.loggedIn ? <div>
            <header className='App-header'>
              <marquee scrollamount='5' direction='right'><img src={image} className='App-logo' alt='logo' /></marquee>
            </header> 
          </div> : null 
          }

          <Switch>  
            <Route path='/readings/new' component={ NewReading } />
            <Route path='/readings' component={ ReadingSplash } />
            <Route path='/cards' component={ CardList }/> 
            <Route exact path='/profile' component={ Profile } />
            <Route exact path='/' component={ Welcome } />
            <Route exact path='/login' component={ Login } />
            <Route exact path='/signup' component={ Signup } />
          </Switch>

        </div>
      </div>
    );
  }

The only area where the CSS changes have taken effect is within the <p> tags inside the Semantic UI Modal:

render() {

        return (
            <div className='card-image'>

               <Modal 
               size='large'
               trigger={
                    <div className="ui medium images" > 
                        <img className="single-card" src={this.getImage(this.props.card.name)} alt="No Image Found" onClick={this.handleClick} />
                    </div>}
                style={inlineStyle.modal}
                >

                    <Modal.Header>{this.props.card.name}</Modal.Header>

                    <Modal.Content >
                        <Image wrapped size='medium' src={this.getImage(this.props.card.name)} floated='left' />
                        <Modal.Description>
                            <Header>{capitalize(this.props.card.card_type)} Arcana</Header>
                            <p>Meaning Upright: {this.props.card.meaning_up} </p>
                            <p>Meaning Reversed: {this.props.card.meaning_rev} </p>
                            <p>Description: {this.props.card.desc} </p>
                        </Modal.Description>
                    </Modal.Content>
                    <Modal.Actions>
                        {/* <Button primary onClick={this.modalClose}>Close</Button> */}
                    </Modal.Actions>
                </Modal>

            </div>
        )
    }

In conclusion, I am still striving to change the global font. While I utilized !important, I understand this isn't the ideal solution. Unfortunately, all the suggestions I've come across involve modifying the global variables for Semantic UI React in the src/site/globals/site.variables folder, which appears to be missing from my setup.

Answer №1

In the realm of Semantic UI build tools, the site.variables file stands out as a distinct entity for CSS configuration. However, if your project does not encompass the entirety of the main Semantic UI project with its comprehensive Gulp build tool set, those files will be inaccessible to you. In such a scenario, the only viable course of action to alter the font would involve compiling your own CSS.

If it appears that you are importing the pre-compiled Semantic UI styles via CSS import early in your application codebase, ensuring that you specify your preferred font on the body tag subsequent to the SUI CSS import is imperative for it to take precedence. For added assurance, combining selectors to enhance specificity can also prove beneficial.

body #root {
  font-family: "MyFont", ...your fallback stack 
}

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

Encountering a Next.js error while trying to link to a dynamic page

My current folder structure is as follows: - blog (directory) -- index.js (list of all blog articles) -- [slug].js (single article) Whenever I am inside index.js, the code looks like this: const Blog = props => { const { pageProps: { articles } } = ...

The onClick function within the .map function is continuously triggered

I am encountering an issue with my code where a Dialog confirmation prompt from Material UI keeps getting called unexpectedly. The problem seems to arise when I add a value to the function that is triggered by a button click within a loop of an array usi ...

Using ternary operator to set multiple variables in setState

Conditional Operator for Setting State in React I am wondering if there is a way to set the state with a variable that holds the correct state value using setState method. interface state { isfiltered: array<boolean> } this.setState({ ...

The communication between React and Django APIs on the Kubernetes cluster seems to be experiencing some issues

My journey with Kubernetes is just beginning as I embark on deploying a react-django web app to a Kubernetes cluster for the first time. To accomplish this, I have put together the following: A frontend.yaml file to manage the npm server A backend.yaml f ...

Assurance of access granted through token

Currently, I am working with jwt authentication that involves access and refresh tokens. However, a problem arises when the access token expires and a new access token is generated on the frontend (react). This process returns a promise. In the backend/ro ...

Make a covering for a fourteen-digit numerical code

Is there a way to use the react-text-mask library to create a mask with exactly 14 digits? I'm looking for something similar to this implementation: export default function NumberMask(props) { const { inputRef, ...other } = props; return ( < ...

Redirecting after submitting a form using React with Redux-Form

I am currently using react-router-dom v4 and I am looking for a way to automatically redirect to another page after successfully submitting a form. After following this tutorial LINK, I created my own submit function: const submit=({email='&apos ...

When the drawer is opened, there is a strange phenomenon of all buttons being mysteriously clicked

Currently, I am working on a single-page web application utilizing React and Material UI, along with React-Mini-Router for routing. The app features a side drawer that is activated by clicking a hamburger icon located in the top app bar. Each item in the d ...

Solving Empty Array Element Issues (Using MongoDB, React, and Axios)

I'm currently developing an application that utilizes Axios to make a GET request to a server I've created. Below is the relevant snippet of the server code that might shed light on the issue: app.get("/getScheduledTimes/:day/:stationId", (req, ...

Utilizing CSS3 transformations for a symbol

I'm currently attempting to implement a CSS transformation on an icon (glyph) within a :before pseudo element. My primary objective is to execute a simple "flip" animation on the icon using transform: scale(-1, 1), but I am encountering difficulties ...

Exploring objects nested within other types in Typescript is a powerful tool for

My journey with TypeScript is still in its early stages, and I find myself grappling with a specific challenge. The structure I am working with is as follows: I have a function that populates data for a timeline component. The data passed to this function ...

Is it possible to format correctly using React-Intl without encountering this particular error message?

Currently, I am working on enhancing a React Native application where the post_date retrieved from a third-party API needs to be presented as: x many days ago, instead of appearing as 2019-05-10 11:26:39. In an attempt to achieve this, I explored utilizin ...

What is causing the gap to appear between the image and the div element underneath?

I recently encountered an issue where I set up an image to scale to full width, but it was always cut off at the bottom when it extended too high. Here is my current setup: div, img, body { margin: 0; padding: 0; } #image { width: 100%; he ...

Updating the value of the chosen drop down option upon selection

I currently have a Material UI dropdown menu implemented in my project. My goal is to use the selected option from the drop down menu for future search functionality. How can I utilize onChange() to store the selected option effectively? At the moment, I ...

The vertical scrolling functionality of the MUI DataGrid in Safari may occasionally fail to work

Utilizing the <Box> component from MUI core and the <DataGrid> component from MUIX, along with some other components, I have created a data grid that has the following appearance: https://i.sstatic.net/Gc8sP.png When the number of rows exceed ...

Separate line rendering of checkboxes in CSS and Vue

I am struggling with styling Vue checkboxes to display side by side until they wrap to a new line. I have tried modifying the code structure, but the existing CSS classes are causing issues. I have created a simplified example on CodeSandbox. Here is a sn ...

Utilizing chart.js data source plugin in React application (react2chartjs)

Upon receiving inspiration from a question regarding importing data from Excel and presenting it as charts using ChartJs (Import data from Excel and use in Chart.js), I was able to successfully achieve this goal. However, my attempt to replicate this proce ...

Display column header row divider for pinned columns in v5 DataGrid

I'm attempting to customize the appearance of pinned columns in MUI's DataGrid by adding a column header-row divider. The official demo by MUI for pinned columns [https://codesandbox.io/s/qix39o?file=/demo.tsx] displays the pinned column header ...

Designing divs that intersect

Struggling to replicate a design due to issues with the overlay section. I have separate divs for the menu bar, globe, and header text but positioning them as overlays is proving problematic. Attempted to use zIndex without success. https://i.sstatic.net/ ...

Only import Bootstrap into a single component

I have a React website that uses a local SCSS file compiled to CSS. Now, I want to incorporate Bootstrap into just one component on the site. After following the instructions at , I managed to get Bootstrap working within my project. However, the issue ar ...