I have some adobe web fonts provided by a stylesheet link and I want to add these fonts to a MudTheme so I can use them in my web app.
<--link rel="stylesheet" href="https://use.typekit.net/gbt1fwk.css"-->
Any ideas how to do that? The Typography section of the manual is quite minimal and does not explain how to use external fonts.
You can use Style and set font-family. For example:
<MudText Typo="Typo.h3" GutterBottom="true" Style="font-family: aktiv-grotesk-extended">Hello, world!</MudText>
Related
can you please instruct me on how to add custom fonts to my rails 5 application? i've added my custom fonts files to fonts folder in app/assets. i went on to use the #fontface and font-url in .scss, but my fonts wont take effect after before and[enter image description here pushing to heroku.
enter image description here
I suggest you go modify your application.html and add the fonts there. I don't know what you are trying to do but adding a simple
<link href="fonts.googleapis.com/css?family=Roboto"; rel="stylesheet">
In your header might be enough.
I want to know how to use Semantic-UI to codeigniter 3.x as frontend framework.
I want to use LESS and not css. thanks
First, it is important to understand that LESS is a CSS pre-compiler that extends the CSS language with features that allows creation of CSS that is more maintainable, themeable and extendable. But ultimately it creates CSS files that are used exactly the same as any other CSS file in a website.
In CodeIgniter you use Semantic-UI created assets the same way as any other CSS (or javascript) files by using a <link> tag.
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script src="semantic/dist/semantic.min.js"></script>
The CSS classes are used in "view" files exactly the same way any other CSS defined class. For instance, the following would put a button styled by Semantic-UI into a CodeIgniter "view" file.
<button class="ui button">Follow</button>
So, the short answer to your question is that you use Semantic-UI in CodeIgniter the same way any other frontend framework that produces CSS and Javascript.
How to use the tools required to customize Semantic-UI is way beyond the scope of what is a "good" question on Stackoverflow.
If you want to customize and build your own version of the UI, you have a steep learning curve ahead. You can start your learning on Semantic-UI's Getting Started page and on the Learn Semantic website.
I have done Semantic UI integration on my CodeIgniter based application starter: https://github.com/ivantcholakov/starter-public-edition-4
For compilation of your own visual themes you need to install locally on your development machine node.js, less.js, postcss/cssnano, they should be able to start from command line.
See the configuration file platform/common/config/less_compile.php there you can define by example your own visual theme. Also, have a look at the already created themes, you will see how to add your common Semantic UI customizations and your theme-specific styles.
add css link in your header and js in your footer
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css">
<script type="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.js"></script>
i use helix for my website. but any font that I insert to it via #font-face not work correctly and text in the screen has some sharp region.
demo: link to site
note: texts in header and body have two different font.
I guess that this happen because of helix setting. Is it true?
please help me for create a website with smooth text
You have a native feature inside the template for assign multiple fonts to your website.
Go to Extensions > Templates > Your Helix Template > Tab Typography
From here you can add a different font for the body, headings, navigation or enable a custom font for css selectors. This feature works well with Google Fonts.
Here you can find more information: Typography Settings.
In my email template I have an import to use a web font:
#import url("http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300");
Outlook is replacing the url content with a anchor:
#import url("http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300");
I tried instead but same result, what is missing?
Thanks
Outlook doesn't really understand #import or #font-face, so whenever you use those in email you need to add an MSO conditional around the style tag.
<!--[if !mso]><!-->
<style type="text/css">
#import url("http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300");
</style>
<!--<![endif]-->
Outlook uses Word as an email editor. You can read about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the following series of articles in MSDN:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
is there any general reason for which Font Awesome doesn't show up in IE 10?
Another question - what's the #font-face thing all about? Do I have to use it? I haven't done it so far and it works well in Firefox and Chrome, could that be the reason for IE?
(excuse my ignorance, I'm a complete newbie)
I had the same issue, the actual cause was https secured connection
I was using https protocol changed it to http
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
I Hope it helps
If it is working on other browsers, make sure you are not in compatibility mode or have not accidentally put your site on the compatibility list in IE.
If it doesn't work in others, it has to have 2 classes: fa AND fa-blah (assuming Font Awesome 4.x; Font Awesome 3.x has different notation)
Also, check your developer tools F12 to make sure all the fonts and CSS/JS is loading into the site.