In an ionic app, I am trying to change the font family of input.
in global.css i'm specifing the global font
* {
font-family: 'FFMalmoom' !important;
}
I want the ion-input text in specific page to take another family
i tried:
ion-input {
font-family: 'verdana' !important;
}
ion-input {
--ion-font-family: 'verdana' !important;
}
with no success , It still takes 'FFMalmoom'.
Instead of specifying the global font in the global.scss move it to the :root selector in the variables.scss file with the --ion-font-family css variable
:root {
--ion-font-family: 'FFMalmoom';
}
After that the font will still be applied globally as ionic uses this as the base font for the entire app. You can then set the ion-input font-family as you normally would with
ion-input{
font-family: 'verdana';
}
I want to use the Google font called poppins and this is the url of the font https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap. Does anyone know hot to do this?
There are three steps to getting a custom font into a tailwindcss project.
Getting the font into the project
Configuring tailwindcss to use the font.
Using custom font-family
1. Getting the font into the project (Reply by: Adam Wathan)
Tailwind doesn't do anything special to auto-import fonts or anything, so you need to import them the same way you would in a regular project, either by adding the Google stylesheet reference to the top of your HTML like this:
<!-- index.html or similar -->
<head>
...
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
</head>
...or by importing your fonts with #font-face declarations at the beginning of your CSS file:
/* Example file: styles.css */
/* poppins-regular - latin */
#font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
src: url('../fonts/poppins-v15-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/poppins-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/poppins-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/poppins-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/poppins-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/poppins-v15-latin-regular.svg#Poppins') format('svg'); /* Legacy iOS */
}
Which way? According to this SO answer: mostly prefer link
2. Configuring tailwindcss to use the font - tailwind docs
Customizing Font Families
By default, Tailwind provides three font family utilities: a cross-browser sans-serif stack, a cross-browser serif stack, and a cross-browser monospaced stack. You can change, add, or remove these by editing the theme.fontFamily section of your Tailwind config.
// tailwind.config.js
module.exports = {
theme: {
fontFamily: {
// Note: This is #notapatch and not the docs
// I think what it is trying to say is that if you define
// a custom font here you are also removing the default
// font families sans, serif and mono.
//
- 'sans': ['ui-sans-serif', 'system-ui', ...],
- 'serif': ['ui-serif', 'Georgia', ...],
- 'mono': ['ui-monospace', 'SFMono-Regular', ...],
+ 'display': ['Poppins', ...],
+ 'body': ['"Open Sans"', ...],
}
}
}
// Docs end:
Customizing font-family with extend
The font-family docs don't cover this, but I've seen examples of extending the font-family instead of removing the default fonts sans serif and mono ... this is from a github issue by simonswiss
// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
theme: {
+ extend: {
fontFamily: {
sans: ['Poppins', ...defaultTheme.fontFamily.sans]
}
+ }
}
}
... will add Poppins to the font-sans stack, and preserve the other font families like font-mono, font-serif etc.
3. Using custom Font-Family
Using a custom font-family is a matter of adding "font" to the fontFamily name. In our case, font-display and font-sans.
<h1 class="font-display">Example display font</h1>
<p class="font-sans">Example text in body</p>
Note: Changed font to Poppins throughout answer to give consistency across text.
If you want to directly import and use it from Google fonts,
Then add the <link> in your <head> section of your index.html file.
Then in your tailwind.config.js file
module.exports = {
theme: {
extend: {
fontFamily: {
'poppins': ['Poppins'],
}
}
}
}
By defining your own font within extend will preserve the default theme fonts and add/extend your own font.
Now, you can use your font with the class font-poppins along with font-sans etc
You can add fallback font by adding it to the poppins array in the theme extension.
For more, please refer to the below links,
https://tailwindcss.com/docs/theme
https://tailwindcss.com/docs/font-family#customizing
1. Import font
You can use #import... directive from the Google Font website to import web fonts in your global.css file. Be sure to put the directive at the beginning or it is invalid
#import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
#tailwind base;
#tailwind components;
#tailwind utilities;
2. Use the font
As has mentioned by the other anwsers, you can configure the tailwind.config.js to generate a reusable utilities in your project. Besides, you can also use square bracket notation to generate a class on the fly. Just add font-['Poppins'] to class properties.
Here is tailwind playground example:
https://play.tailwindcss.com/xZpx31j8W0
I have this configuration in a .css file
#font-face {
font-display: swap;
font-family: 'Nunito';
font-style: normal;
font-weight: 400;
src: local('Nunito Regular'), local('Nunito-Regular'),
url('~assets/fonts/Nunito-400-cyrillic-ext1.woff2') format('woff2');
}
And this in my tailwind.config.js file
fontFamily: {
// https://tailwindcss.com/docs/font-family#customizing
sans: [
'Nunito'
],
},
Thus I can use it in my markup with
<p class="font-sans">
I'm a sans-serif paragraph.
</p>
So yeah, my font is local but maybe my configuration can give you some insight on how to setup it on your side too.
Then, you could font-face's url key to set in the google fonts url as shown here: https://css-tricks.com/dont-just-copy-the-font-face-out-of-google-fonts-urls/
Here's what I did
In your main scss file
#import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
then in tailwind config....
theme: {
extend: {
fontFamily: {
sans: ['Poppins', ...defaultTheme.fontFamily.sans],
},
I add costum styles to the RTE with a CSS File:
RTE.default.contentCSS = EXT:netjapan/Resources/Public/css/rte.css
For some elements this works. For example for a ulElement:
ul.liststyle1 {
list-style: none;
padding-left: 17px;
}
When I select the ul in the RTE I can chose the Blockstyle liststyle1.
I want to do the same for p:
p.test {
font-size: 80%;
}
And when I select the p I can chose the Blockstyle test and the style is used. But when I save the Blockstyle is gone.
I added this Typoscript:
RTE.default {
removeTags = sdfield, strike
proc.entryHTMLparser_db.removeTags = sdfield, strike
}
So that p is not in the removeTags list. But it had no effect.
Anyone know how it comes that the Blockstyle is removed on the pElement?
I had simillar problem last week. Sometimes RTE is going crazy. I mean that there is no logical sense in it. Check this: marke the text and use the container style it will wrap it in div but there will be also <p> in it so you will have something like <div><p class="bodytext">text</p></div> - you can add style for that. At least this solved my problem
does anybody know, how I can show the fileicon in my Downloadlist created with content Type filelinks in Typo3 6.1.5?
In older Typo Versions, I used the extension css_filelinks, but it doesn't work anymore.
My current Typoscript Setup:
tt_content.uploads.20.renderObj = COA
tt_content.uploads.20.renderObj.20.data = file:current:title //file:current:description // file:current:name
First of all, to let TYPO3 display file icons from the filelinks content element, you need to choose any other CE layout (in the Appearance tab) than the default.
Now TYPO3 prepends the files with icons. You might not find them too beautiful. If so, you can configure the file path end type of the icons with TypoScript:
# path to the folder containing the icons
tt_content.uploads.20.renderObj.15.file.import = fileadmin/folder/to/my/icons/
# wrap to indicate the file type of the icons (defaults to |.gif)
tt_content.uploads.20.renderObj.15.file.wrap = |.png
If you want to display icons globally without setting the layout, get rid of the corresponding if statement:
tt_content.uploads.20.renderObj.15.stdWrap.if >
Of course you could also just use CSS selectors to display the right icon:
a[href $='.pdf'] { background: url('icons/pdf.png') no-repeat 1px 2px; padding-left: 20px; }
Is there no CSS-Class you can use?
Like this:
span.csc-uploads-fileName {
background: url("../img/icon.png") no-repeat scroll 0 0 transparent;
height: 40px;
width: 43px;
text-indent: -999em;
}
How do I set the padding inside the tinyMCE editor?
I've seen answers like so:
body{ padding:0px }
But it shouldn't be on the body??
Have look at the tinymce config param content_css. Using this param you may set your own css stuff and overwrite tinymcedefault css. You may apply the padding to whatever element you want (under body)
you could also try these methods:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
// set whatever class name you have that adds the padding
body_class: 'my_class',
// or attach your own css file (resolved to http://domain/myLayout.css)
content_css : '/myLayout.css',
// or finally, add your padding directly
content_style: "body {padding: 10px}"
});
see the docs for more info
If you need a quick solution try the CSS definition:
div.mce-edit-area{
background:#FFF;
filter:none;
>>> padding:10px; <<<
}
in the skin.min.css and skin.ie7.min.css files.