How to import a Google Font in a Semantic-UI-React project?
Clash Royale CLAN TAG#URR8PPP
How to import a Google Font in a Semantic-UI-React project?
I used create-react-app to bootstrap a project and am using semantic-ui-react with it. I installed semantic-ui and gulp so I can do custom theming. I would like to choose a Google Font to use but I can't figure out how to import it.
I followed the instructions in the semantic-ui docs (here) which pointed to the site.variables file, where one can use pre-defined global less variables to alter the site. The "default" theme uses the variables below to import a google font. I included the same variables and changed the @fontName to the google font I wanted, but the font did not import (I checked the sources in the Chrome developer console).
site.variables
@fontName : 'Anton';
@fontSmoothing : antialiased;
@googleFontFamily : 'Anton';
@headerFont : @fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif;
@pageFont : @fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif;
@googleFontName : @fontName;
@importGoogleFonts : true;
@googleFontSizes : '400,700,400italic,700italic';
@googleSubset : 'latin';
@googleProtocol : 'https://';
@googleFontRequest : '@googleFontName:@googleFontSizes&subset=@googleSubset';
The strange thing is that the google font "Lato" that is imported in the "default" theme doesn't show up as a source in the developer console either. Is there something wrong with my gulp pipeline maybe? Let me know if there's any other code or information I can include that will help you answer the question.
Here's the relevant React code per @Benjamin's request:
project/src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
import registerServiceWorker from './registerServiceWorker';
import './semantic/dist/semantic.min.css';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
project/src/App.js
import React, Component from 'react';
import TopMenu from './Menu.js'
class App extends Component
render()
return (
<div className="App">
<TopMenu />
</div>
);
export default App;
project/src/Menu.js
import React, Component from 'react'
import Menu from 'semantic-ui-react'
import SignInScreen from './Login.js'
export default class TopMenu extends Component
state = activeItem: 'home'
handleItemClick = (e, name ) => this.setState( activeItem: name )
render()
const activeItem = this.state
return (
<Menu size='small' stackable >
<Menu.Item name='home' onClick=this.handleItemClick />
<Menu.Item
name='messages'
active=activeItem === 'messages'
onClick=this.handleItemClick
/>
<Menu.Item position='right'>
<SignInScreen />
</Menu.Item>
</Menu>
)
Network tab in Chromer developer tools
Project Directory Tree
~/Documents/bingo tree -C -L 6 --filelimit=12
.
├── README.md
├── firebase.json
├── firestore.indexes.json
├── firestore.rules
├── functions
│ ├── index.js
│ └── package.json
├── node_modules [1172 entries exceeds filelimit, not opening dir]
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── semantic.json
├── src
│ ├── App.js
│ ├── App.test.js
│ ├── Config.js
│ ├── Login.js
│ ├── Menu.js
│ ├── firebaseui-styling.global.css
│ ├── images
│ │ └── gsb-logo.jpeg
│ ├── index.js
│ ├── logo.svg
│ ├── registerServiceWorker.js
│ └── semantic
│ ├── dist
│ │ ├── components
│ │ │ ├── dropdown.css
│ │ │ ├── dropdown.min.css
│ │ │ ├── image.css
│ │ │ ├── image.min.css
│ │ │ ├── item.css
│ │ │ ├── item.min.css
│ │ │ ├── menu.css
│ │ │ ├── menu.min.css
│ │ │ ├── reset.css
│ │ │ ├── reset.min.css
│ │ │ ├── transition.css
│ │ │ └── transition.min.css
│ │ ├── semantic.css
│ │ ├── semantic.min.css
│ │ └── themes
│ │ ├── basic
│ │ │ └── assets
│ │ ├── default
│ │ │ └── assets
│ │ ├── github
│ │ │ └── assets
│ │ └── material
│ │ └── assets
│ ├── gulpfile.js
│ ├── src
│ │ ├── definitions
│ │ │ ├── behaviors
│ │ │ │ ├── api.js
│ │ │ │ ├── form.js
│ │ │ │ └── visibility.js
│ │ │ ├── collections
│ │ │ │ ├── breadcrumb.less
│ │ │ │ ├── form.less
│ │ │ │ ├── grid.less
│ │ │ │ ├── menu.less
│ │ │ │ ├── message.less
│ │ │ │ └── table.less
│ │ │ ├── elements [15 entries exceeds filelimit, not opening dir]
│ │ │ ├── globals
│ │ │ │ ├── reset.less
│ │ │ │ ├── site.js
│ │ │ │ └── site.less
│ │ │ ├── modules [32 entries exceeds filelimit, not opening dir]
│ │ │ └── views
│ │ │ ├── ad.less
│ │ │ ├── card.less
│ │ │ ├── comment.less
│ │ │ ├── feed.less
│ │ │ ├── item.less
│ │ │ └── statistic.less
│ │ ├── semantic.less
│ │ ├── site
│ │ │ ├── collections
│ │ │ │ ├── breadcrumb.overrides
│ │ │ │ ├── breadcrumb.variables
│ │ │ │ ├── form.overrides
│ │ │ │ ├── form.variables
│ │ │ │ ├── grid.overrides
│ │ │ │ ├── grid.variables
│ │ │ │ ├── menu.overrides
│ │ │ │ ├── menu.variables
│ │ │ │ ├── message.overrides
│ │ │ │ ├── message.variables
│ │ │ │ ├── table.overrides
│ │ │ │ └── table.variables
│ │ │ ├── elements [30 entries exceeds filelimit, not opening dir]
│ │ │ ├── globals
│ │ │ │ ├── reset.overrides
│ │ │ │ ├── reset.variables
│ │ │ │ ├── site.overrides
│ │ │ │ └── site.variables
│ │ │ ├── modules [34 entries exceeds filelimit, not opening dir]
│ │ │ └── views
│ │ │ ├── ad.overrides
│ │ │ ├── ad.variables
│ │ │ ├── card.overrides
│ │ │ ├── card.variables
│ │ │ ├── comment.overrides
│ │ │ ├── comment.variables
│ │ │ ├── feed.overrides
│ │ │ ├── feed.variables
│ │ │ ├── item.overrides
│ │ │ ├── item.variables
│ │ │ ├── statistic.overrides
│ │ │ └── statistic.variables
│ │ ├── theme.config
│ │ ├── theme.less
│ │ └── themes [23 entries exceeds filelimit, not opening dir]
│ └── tasks [13 entries exceeds filelimit, not opening dir]
├── yarn-error.log
└── yarn.lock
33 directories, 87 files
project/src/semantic/src/theme.config
/*
████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗
╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝
██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗
██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║
██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║
╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝
*/
/*******************************
Theme Selection
*******************************/
/* To override a theme for an individual element
specify theme name below
*/
/* Global */
@site : 'default';
@reset : 'default';
/* Elements */
@button : 'default';
@container : 'default';
@divider : 'default';
@flag : 'default';
@header : 'default';
@icon : 'default';
@image : 'default';
@input : 'default';
@label : 'default';
@list : 'default';
@loader : 'default';
@rail : 'default';
@reveal : 'default';
@segment : 'default';
@step : 'default';
/* Collections */
@breadcrumb : 'default';
@form : 'default';
@grid : 'default';
@menu : 'default';
@message : 'default';
@table : 'default';
/* Modules */
@accordion : 'default';
@checkbox : 'default';
@dimmer : 'default';
@dropdown : 'default';
@embed : 'default';
@modal : 'default';
@nag : 'default';
@popup : 'default';
@progress : 'default';
@rating : 'default';
@search : 'default';
@shape : 'default';
@sidebar : 'default';
@sticky : 'default';
@tab : 'default';
@transition : 'default';
/* Views */
@ad : 'default';
@card : 'default';
@comment : 'default';
@feed : 'default';
@item : 'default';
@statistic : 'default';
/*******************************
Folders
*******************************/
/* Path to theme packages */
@themesFolder : 'themes';
/* Path to site override folder */
@siteFolder : 'site/';
/*******************************
Import Theme
*******************************/
@import (multiple) "theme.less";
/* End Config */
project/src/firebaseui-styling.global.css
.firebaseui-container
background: rgba(0, 0, 0, 0.05);
margin-bottom: 15px;
min-height: 150px;
padding-top: 10px;
border-radius: 20px;
box-shadow: none;
.firebaseui-container.firebaseui-page-provider-sign-in
background: transparent;
box-shadow: none;
min-height: 0;
margin-bottom: 0;
padding-top: 0;
.firebaseui-container.firebaseui-id-page-callback
background: transparent;
box-shadow: none;
margin-top: 40px;
height: 84px;
min-height: 0;
margin-bottom: 0;
padding-top: 0;
.firebaseui-card-header
display: none;
.firebaseui-subtitle, .firebaseui-text
color: rgba(255, 255, 255, 0.87);
.firebaseui-form-actions .mdl-button--raised.mdl-button--colored.firebaseui-button
background: rgba(0, 0, 0, 0.1);
.firebaseui-id-dismiss-info-bar
display: block;
.firebaseui-info-bar
border: 0;
border-radius: 10px;
left: 5%;
right: 5%;
top: 10%;
bottom: 10%;
.image-container
background-size:cover;
background-repeat:no-repeat;
width:40px;
height:40px;
clip-path: circle(50% at top 50% left 50%);
@Benjamin Adding the GUI code now. Not sure what you mean by a filter active in my console? I'm just going to Google Developer Tools and then clicking on "Sources" to see what local and remote sources are present.
– James Nicholson
Aug 8 at 19:17
sry i was mistaking with the network tab. But talking of it: have you checked the network tab as well? is the font being requested?
– Benjamin
Aug 8 at 19:21
@Benjamin Ah no worries. I just checked the network tab and no, the font is not being requested. I have no idea why not? It has something to do with Semantic and Gulp I think though.
– James Nicholson
Aug 8 at 19:25
1 Answer
1
Keep in mind that Semantic UI and Semantic UI React are two separate projects. All of the styles are in Semantic UI. To get those styles you either have to import the pre-compiled CSS into your project or build them yourself (using Semantic UI build tools, semantic-ui-sass, semantic-ui-less, etc).
Based on your question, it appears you are trying to change variables inside the Semantic UI build tools for the CSS. In order to get those changes, you need to build those styles separate from your React application. Once you have built those styles you can then import the output into your React application. You can either do this separately or you can run these processes simultaneously so changes in your styles are auto compiled and once the CSS file that outputs changes, it will hot reload into your React application.
If you are using pre-compiled CSS and you just want to override the fonts used, you can make your own CSS file with the @font-face declarations and import it into the root of your React application. As long as your css is more specific than the classes used inside Semantic UI, your font will work.
From your code examples above, I cannot see anywhere you are importing CSS, so I can only guess which of these two solutions you are using so I provided answers for both.
Thanks for your thorough response @brianespinosa. I am using the hot reloading solution using Semantic's build tools (Gulp). My
yarn start script runs gulp build-css build-assetts. Also, I edited my response above to include my index.js code. This is where I'm importing the css with import './semantic/dist/semantic.min.css'; Any idea why this wouldn't work to import the Google font?– James Nicholson
Aug 13 at 23:56
yarn start
gulp build-css build-assetts
index.js
import './semantic/dist/semantic.min.css';
Okay, so you are running
yarn start on your create-react-app project that also runs in parallel the Gulp build for SUI. The next thing I would look at is your network tab and see where it is looking for those fonts and where the errors are occurring. You can't necessarily tell from those configs where the fonts are coming from. You can either import them from Google's remote CDN, or you can include them in your own bundle. If CSS is being imported then you just need to find out where the fonts are being referenced and fix that.– brianespinosa
Aug 14 at 14:47
yarn start
Yes, I run the Gulp "watch" script in a separate terminal tab to hot reload the CSS. I looked at the network tab like you recommended (screenshot included above) and the strange thing is the Google Font I'm trying to import "Anton" isn't being imported. As you'll see in the image, the "Roboto" Google Font is being imported 3 times. Once by Firebase, and twice by what I can only assume is Semantic. For some reason Gulp is not including my import directive from the site.variables a.k.a "User Global Variables" file.
– James Nicholson
Aug 15 at 0:59
Since you have changed the font variables in
site.variables for the default theme... have you looked at your theme.config file to confirm that the default theme is set for the entire site and all elements? semantic-ui.com/usage/theming.html#using-packaged-themes Note in that example in SUI docs, the site is set as "material" which means that you changing the site.variables in the default theme will actually not be picked up.– brianespinosa
Aug 15 at 15:52
site.variables
I can confirm the default theme is set for the entire site and all elements (see theme.config file I added above). Also, I didn't change the site.variables in the default theme, I changed them in the site theme:
project/src/semantic/src/site/globals/site.variables. I'm still stumped...– James Nicholson
Aug 15 at 19:07
project/src/semantic/src/site/globals/site.variables
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
dumb question: is there a filter active in your console? Also mind adding the relevant part of your gulp file?
– Benjamin
Aug 8 at 19:09