How to configure the page to display correct font type using Semantic-UI?

StackOverflow https://stackoverflow.com/questions/21303799

  •  01-10-2022
  •  | 
  •  

Question

I just downloaded Sematic-UI and installed the files as follow.

├── css
│   ├── semantic.css
│   └── semantic.min.css
├── fonts
│   ├── basic.icons.eot
│   ├── basic.icons.svg
│   ├── basic.icons.ttf
│   ├── basic.icons.woff
│   ├── icons.eot
│   ├── icons.otf
│   ├── icons.svg
│   ├── icons.ttf
│   └── icons.woff
├── images
│   ├── bg.jpg
│   ├── cat.png
│   ├── loader-large-inverted.gif
│   ├── loader-large.gif
│   ├── loader-medium-inverted.gif
│   ├── loader-medium.gif
│   ├── loader-mini-inverted.gif
│   ├── loader-mini.gif
│   ├── loader-small-inverted.gif
│   └── loader-small.gif
├── index.php
└── javascript
    ├── jquery.min.js
    ├── semantic.js
    └── semantic.min.js

This is the content of my index.php

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

  <link rel="stylesheet" type="text/css" href="css/semantic.min.css">

  <script src="javascript/jquery.min.js"></script>
  <script src="javascript/semantic.min.js"></script>

  <title>Semantic Examples</title>
</head>

<body id="home">

  <nav class="ui menu">
    <h3 class="header item">Title</h3>
    <a class="active item">Home</a>
    <a class="item">Link</a>
    <a class="item">Link</a>
    <span class="right floated text item">
      Signed in as <a href="#">user</a>
    </span>
  </nav>

  <button class="small ui button">
    <i class="heart icon"></i>
    Like it
  </button>

  <div class="ui animated button">
    <div class="visible content">Next</div>
    <div class="hidden content">
      <i class="right arrow icon"></i>
    </div>
  </div>

  <div class="ui vertical animated button">
    <div class="hidden content">Shop</div>
    <div class="visible content">
      <i class="cart icon"></i>
    </div>
  </div>

  <div class="ui animated fade button">
    <div class="visible content">Sign-up for a Pro account</div>
    <div class="hidden content">
      $12.99 a month
    </div>
  </div>

  <div class="ui buttons">
    <div class="ui red button">Cancel</div>
    <div class="or"></div>
    <div class="ui blue button">Save</div>
  </div>
</body>
</html>

This is the screen shot of displayed font on the browser. enter image description here

I believe, the correct font type should be the same as the LIKE IT button's font type.

My understanding now is I don't have to configure anything about the fonts folder, I only have to link to semantic.min.css, the sematic.min.css itself refers to the fonts folder.

I already test the link sematic.min.css, jquery.min.js, semantic.min.js using View Source of the browser's pop up menu, nothing broken.

Please help. Thanks.

Was it helpful?

Solution

I stumbled on your post as I'm having the same issue. Nothing is broken in the web application I'm building but the fonts don't change to the beautiful fonts being used at semantic-ui.

Upon searching a little more, it seems that semantic-ui does not define any base font settings, at least for now. Have a look here. Custom package creation is still being added. Until then I guess you need to let your inner web designer do the due!

Update:

I poked around a little more and was able to get the fonts being used by semantic-ui. Go to Google Fonts and create your own font collection. Semantic-ui is using Open Sans. Click the use button at the bottom to get the link to the font style sheet in the 3rd step. For Open Sans, the link is:

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Include the above line in your <head> tag and then include the following <style> tag.

<style type="text/css">
    {# set default font for website #}
    * {
        font-family: 'Open Sans', sans-serif !important;
    }
</style>

You should be all set!

OTHER TIPS

Add this into your custom CSS file (which must be after the semantic CSS file):

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600);

body, * {
    font-family: 'Open Sans', sans-serif !important;
}

Try the solution in this link. It worked for me.

html, body {
    height: 100%;
    font-size: 15px;
}
html, body {
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top