I have a project where I need to use custom fonts. But I have no idea how to use this in my HTML. I have searched online how to do this, but all examples use a font that is contained in one file. My font is contained in multiple files.
How do I specify which specific font of the CircularStd I want to use on each element?
This is a screenshot of my index.scss file which contains the tailwind imports and the definition of my font:
An approach to this would be creating a custom font class in your tailwindconfig.js and extending it to your default tailwind theme. For example, if you're using Google Fonts and you want to use the font Manrope for a specific header, you can extend the fontFamily variant like so:
module.exports = {
theme: {
extend: {
fontFamily: {
'manrope': 'Manrope',
}
}
}
}
Now, to use this custom class declare it in your html by following the syntax font-{fontFamily}. So in this case, we're going to use font-manrope.
<h4 class="font-manrope">I'm a header using the font Manrope</h4>
If you think that your font has many files and you need them all then why not create a #fontface for each one although this is not the best practice, you are supposed to for example to choose the file with the light and standard font and you create the #fontface based on it and include it's file the others like the bold and italics can eventually be done using CSS but the most important thing is that you have your font implemented.
so for example you will add your font:
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
and if you want it to be bold and italic use
p{
font-weight:600;
font-style: italic;
}
I hope that would help!
Related
I have created a kotlin react app using kotlin-react and I'm using kotlin-styled for CSS styling.
I want to change the font of a custom text component with a custom font from Google Fonts. With .css files I would have done the following:
#import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
.text {
font-family: 'Nunito', sans-serif;
}
How can I achieve something similar with kotlin-styled. I have looked for a import or url function but It doesn't exist. Also, they do not have any documentation on external fonts. Any help is appreciated.
There is CSSBuilder#import available since pre.210, so what you can do is:
CSSBuilder().apply {
import("url('https://fonts.googleapis.com/css2?family=Nunito&display=swap')")
fontFamily = "'Nunito', sans-serif"
}
I am working on a script that puts some text on a page. The text contains some unicode characters. I have custom font that has those characters, but I'd like to use my font only if the font used on a webpage does not have them. I can't controll main font of the page. I thought of something like this, but it does not work:
.someclass {
font-family: inherit, 'myFont';
}
What's the proper way of doing this?
I think this can help:
#font-face {
font-family: fontname;
src: url(address.ttf);
}
What is right way to make available custom fonts (e.g. google fonts) in my new theme?
It look like this issue:
https://github.com/uikit/uikit/issues/111
I did make what they says, only paste this code in the uikit.less:
/* Custom Fonts */
#font-face {
font-family: 'opensanscondensed';
src: url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700);
}
But it did not works. And i cant find where i should specify font-family for some elements(nav, top-menu, etc .. )
I would be grateful for any answers.
The url that you are pasting in the src property is an url of a css file (that google generates for you to import the font faces). You can see that it already generates font faces for you:
http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700
What you need to do in your style sheet file is just importing the css from the url. Something like this:
#import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700)
and then you can use it like so:
font-family: 'Open Sans Condensed', sans-serif;
DEMO
I want to use a different font for my website, which is not a regular webfont. I have created EOT files already. Now how can I integrate those fonts with twitter bootstrap ? Can anyone help ?
Thanks
The easiest way I've seen is to use Google Fonts.
Go to Google Fonts and choose a font, then Google will give you a link to put in your HTML.
Then add this to your custom.css:
h1, h2, h3, h4, h5, h6 {
font-family: 'Your Font' !important;
}
p, div {
font-family: 'Your Font' !important;
}
or
body {
font-family: 'Your Font' !important;
}
You can find a customizer on the official website, which allows you to set some LESS variables, as #font-family-base. Link your custom fonts in your layout, and use your custom generated bootstrap style.
Link here
For an example with the #font-face rule, using WOFF format (which is pretty good for browser compatibility), add this CSS in your app.css file and include your custom boostrap.css file.
#font-face {
font-family: 'Proxima Nova';
font-style: normal;
font-weight: 400;
src: url(link-to-proxima-nova-font.woff) format('woff');
}
Please note Proxima Nova is under a license.
Hi you can create a customized build on bootstrap, just change the font name in the following pages
Bootstrap 2.3.2
http://getbootstrap.com/2.3.2/customize.html#variables
Bootstrap 3
http://getbootstrap.com/customize/#less-variables
After that, make sure to use proper #font-face in a css file and link that to your page. Or you could use font kit generators.
you can customize twitter bootstrap css file, open the bootstrap.css file on a text editor, and change the font-family with your font name and SAVE it.
OR got to http://getbootstrap.com/customize/ and make a customized twitter bootstrap
First of all you have to include your font in your website (or your CSS, to be more specific) using an appropriate #font-face rule.
From here on there are multiple ways to proceed. One thing I would not do is to edit the bootstrap.css directly - since once you get a newer version your changes will be lost. You do however have the possibility to customize your bootstrap files (there's a customize page on their website). Just enter the name of your font with all the fallback names into the corresponding typography textbox. Of course you will have to do this whenever you get a new or updated version of your bootstrap files.
Another chance you have is to overwrite the bootstrap rules within a different stylesheet. If you do this you just have to use selectors that are as specific as (or more specific than) the bootstrap selectors.
Side note: If you care about browser support a single EOT version of your font might not be sufficient. See http://caniuse.com/eot for a support table.
Here is a sample CSS
h1 {
font-family: 'header-font', arial, sans-serif;
}
p {
font-family: 'paragraph-font', arial, serif;
}
Is it possible to load any remote Google Font (let say 'Lato') so that it's family name in CSS would be 'header-font'?
Edit: The idea behind this is to be able to easily swap fonts in a WP theme. Unfortunately using variables in CSS preprocessors is not an option in my case.
I don't think you can to be honest. The Google font has a predefined name when you view the google font. See this for example: http://fonts.googleapis.com/css?family=Akronim
Its name is set as 'Akronim' and I dont think you can reference it by any other name.
Yes, very easily. Once you located the font at Google, eg.
#import url('https://fonts.googleapis.com/css?family=Lato:400&subset=latin-ext');
just direct your browser to the url specified:
https://fonts.googleapis.com/css?family=Lato:400&subset=latin-ext
What you get back is the #font-face CSS item for the font (or fonts). Simply use this verbose version in your CSS instead of the original #import specification. You can freely rename the font-family item in any of these descriptions. Yes, you have to make sure there are no clashes with other fonts but the naming is completely up to you.
Yes, you can give any name you want when you define the font family in the #font-face style declaration and use that name to reference it later in the stylesheet.
#font-face
{
font-family: whateverYouWant;
src: url('example.ttf'),
url('example.eot');
... /* and so on */
}
Whatever you name the style as in the font-family property is how it will be referred to from the rest of the document. However I don't know how it competes with local font files (so if you tried to name a custom font Arial I'm not sure what you would get - the custom font or the real Arial). I don't know why you would do that anyway though.