Custom google font (poppins) in Tailwind CSS?

Custom google font (poppins) in Tailwind CSS? - import

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],
},

Related

change font in ionic input

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';
}

Using multiple fonts across pages in Next JS

I'm used to importing google fonts in css files and then using the font-family property. But I want to utilize the "built-in automatic self-hosting" provided by #next/font.
#next/font includes built-in automatic self-hosting for any font file.
This new font system also allows you to conveniently use all Google Fonts with performance and privacy in mind. CSS and font files are downloaded at build time and self-hosted with the rest of your static assets. No requests are sent to Google by the browser.
So far I can only import and use multiple fonts in index.js. I want to use the same fonts in another page about.js without loading the fonts again.
How can I import multiple fonts from #next/font/google and use them across pages and components?
Is there a way I can attach the fonts to particular classes or selectors?
h1 {
font-family: "Exo 2", sans-serif;
}

We cannot attach #next/font/google fonts to particular classes using font-family because they have different names when imported.
We can reuse fonts by doing this:
Create a separate utils/fonts.js file:
import { Exo_2, Noto_Sans } from "#next/font/google";
export const titleFont = Exo_2({
weight: ["500", "600", "700"],
subsets: ["latin"],
});
export const textFont = Noto_Sans({
weight: ["500", "600", "700"],
subsets: ["latin"],
});
Import the fonts required in pages/index.js:
import { textFont, titleFont } from "../utils/fonts";
Use them with className property:
<main className={styles.main + " " + textFont.className}>
<h1 className={titleFont.className}>Home Page</h1>
<p>Hi this is the home page.</p>
</main>
You can do the same thing with local fonts. Just import them in fonts.js and then export their loader functions.
Using variable names like textFont and titleFont helps in forming a uniform system.
You can use the font with other styling classes by simply adding a space in between like this:
{styles.main + " " + textFont.className}
Read documentation here.

In short, I try this method where i can use multiple fonts on my code and apply css on it also without any problem.
Here is my code :
//app/page.js
import Image from 'next/image'
import { Poppins} from '#next/font/google'
import { Anton} from '#next/font/google'
import styles from './page.module.css'
const poppins = Poppins({ weight: '400', subsets: ['latin'] })
const anton = Anton({ weight: '400', subsets: ['latin'] })
export default function Home() {
return (
<main className={styles.main}>
<div >
<h1 className={styles.heading}><span className={anton.className}> Hello </span></h1>
</div>
<div >
<h2 className={styles.heading}><span className={poppins.className}> Hello </span></h2>
</div>
</main>
)
}
You see i use heading and apply styles on it and after that i can use span in inside the heading tag and apply the fonts that i want to use

SAPUI5: sap.m.TextArea monospace font

could you give me a hint how to set the monospace font in the sap.m.TextArea ?
I'm missing something like setDesign( sap.ui.core.Design.Monospace ) in the old sap.ui.commons.TextArea .

add an own style file like described here:
https://openui5.hana.ondemand.com/topic/723f4b2334e344c08269159797f6f796
with content:
textarea.sapMInputBaseInner.sapMTextAreaInner {
font-family: monospace;
}

Add Custom Icon in Ionic 2

I am using Ionic 2 for developing my App. I want to use my custom icons in my app like we use ionic 2 icons using tag. Eg:
<ion-icon name="my-custom-icon"></ion-icon>
How can i achieve this? Is there any recommended way to doing this?

This is the easiest way I've found, from the forums at https://forum.ionicframework.com/t/anyway-to-custom-the-tabbars-icon-with-my-own-svg-file/46131/36.
In your app.scss file, add the following code:
ion-icon {
&[class*="appname-"] {
// Instead of using the font-based icons
// We're applying SVG masks
mask-size: contain;
mask-position: 50% 50%;
mask-repeat: no-repeat;
background: currentColor;
width: 1em;
height: 1em;
}
// custom icons
&[class*="appname-customicon1"] {
mask-image: url(../assets/img/customicon1.svg);
}
&[class*="appname-customicon2"] {
mask-image: url(../assets/img/customicon2.svg);
}
&[class*="appname-customicon3"] {
mask-image: url(../assets/img/customicon3.svg);
}
}
Then in your templates, you can use the following HTML to create the icon:
<ion-icon name="appname-customicon"></ion-icon>
This is far less complicated than using the font-based methods. As long as you're not adding hundreds of icons you should be okay with this method. However each image is sent as a separate request, where as with the font methods all the images are contained in one file, so it would be a little more efficient.

If you want to use custom fonts in ionic 2+ you can do it with following.
Step 01:
Have/create custom font SVG files using tools such as XD.
Go to awesome online tool https://icomoon.io to generate font icons out of your SVG files. It's free tool and very good, I am using it for a while.
Download your custom font file.
Your file will look like something below.
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
}
replace above code with :
[class^="icon-"],
[class*=" icon-"],
[class^="ion-ios-icon"],
[class*="ion-ios-icon"],
[class^="ion-md-icon"],
[class*="ion-md-icon"]{
#extend .ion;
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
}
Step 02:
We can use SASS #mixing for repetitive work
#mixin makeIcon($arg, $val) {
.ion-ios-#{$arg}:before ,
.ion-ios-#{$arg}-circle:before ,
.ion-ios-#{$arg}-circle-outline:before ,
.ion-ios-#{$arg}-outline:before ,
.ion-md-#{$arg}:before ,
.ion-md-#{$arg}-circle:before ,
.ion-md-#{$arg}-circle-outline:before ,
.ion-md-#{$arg}-outline:before {
content: $val;
font-size: 26px;
}
}
we can use our sass mixing in our sass file like :
#include makeIcon(icon-new-home, '\e911')
Step 03
Use it like
<ion-tabs class="footer-tabs" [selectedIndex]="mySelectedIndex">
<ion-tab [root]="tab1Root" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabIcon="icon-new-home"></ion-tab>
</ion-tabs>
and its even support android ripple effect, which kinda looks cool
[Updated] 30 Nov 2017
#ionic/app-scripts : 3.1.2
Ionic Framework : ionic-angular 3.9.2
For Ionic 3.1.2
You need to add #import "ionicons"; inside your /src/theme/variables.scss file which will fix below error
"[class^="icon-"]" failed to #extend ".ion". The selector ".ion" was not found. Use "#extend .ion !optional"
if the extend should be able to fail.

With the current Ionic 3.3.0 you can use the solution from Anjum, but you have to change
#import "ionic.ionicons";
to
#import "ionicons";
in the src/theme/variables.scss file.
Found this solution at:
https://github.com/yannbf/ionicCustomIconsSample/blob/master/src/theme/variables.scss

Been trying to implement Anjum Nawab shaikh answer on top with the icons sass sheet from icomoon.
I have been able to get it working with version 2.2.2.
In the www/fonts of the project I had added the icomoon files:
icomoon.svg
icomoon.ttf
icomoon.woff
icomoon.eot
icomoon.scss
In icomoon.scss I added the following scss:
#font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?tclihz');
src: url('../fonts/icomoon.eot?tclihz#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?tclihz') format('truetype'),
url('../fonts/icomoon.woff?tclihz') format('woff'),
url('../fonts/icomoon.svg?tclihz#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"],
[class*=" icon-"],
[class^="ion-ios-icon"],
[class*="ion-ios-icon"],
[class^="ion-md-icon"],
[class*="ion-md-icon"]{
/* Didn't feel the need to #extend since this just adds to already existing .ion
code which I believe is replaced to just ion-icon tag selector in
www/assets/fonts/ionicons.scss */
font-family: "Ionicons", "icomoon" !important; //So just add this
}
//Mixin
#mixin makeIcon($arg, $val) {
.ion-ios-#{$arg}:before ,
.ion-ios-#{$arg}-circle:before ,
.ion-ios-#{$arg}-circle-outline:before ,
.ion-ios-#{$arg}-outline:before ,
.ion-md-#{$arg}:before ,
.ion-md-#{$arg}-circle:before ,
.ion-md-#{$arg}-circle-outline:before ,
.ion-md-#{$arg}-outline:before {
//important to overwrite ionic icons with your own icons
content: $val !important;
font-size: 26px;
}
}
//Adding Icons
#include makeIcon(email, '\e900');
...
Then I did an import to the variables.scss
#import "../www/fonts/icomoon";
Now we can add this to the html template:
<ion-icon name="email"></ion-icon>

Before starting : make sure that you have every svg file you need.
Now just go here : http://fontello.com/
That tool will generate your icon font and the CSS needed with. It is pretty intuitive, just use it, download, and copy your font wherever you want in your www folder but keep the same file structure. To finish, just integrate your CSS file in your index.html file and you're done!
I hope it will solve your issue! ;-)

According to ionic team:
Hey there!
Right now it's limited to using ionicons, since underneath it's rendering an ion-icon, and thats handling the platform differences. You could open an issue and we could discuss adding this feature there
You can see all answers in here:
https://forum.ionicframework.com/t/anyway-to-custom-the-tabbars-icon-with-my-own-svg-file/46131/16
I also find this:
https://www.npmjs.com/package/ionic2-custom-icons ,
but do not seems a clever solution (I prefer to wait for a solution of Ionic team).
The best scenario for this is use old way, by creating a class on a scss file.

For add custom icons I use in my scss file:
.ion-ios-MYICON:before,
.ion-ios-MYICON-circle:before,
.ion-ios-MYICON-circle-outline:before,
.ion-ios-MYICON-outline:before,
.ion-md-MYICON:before,
.ion-md-MYICON-circle:before,
.ion-md-MYICON-circle-outline:before,
.ion-md-MYICON-outline:before {
#extend .ion;
}
.ion-ios-MYICON:before,
.ion-ios-MYICON-outline:before,
.ion-md-MYICON:before,
.ion-md-MYICON-outline:before {
content: 'your-custom-image';
}
Then in your HTML code:
<ion-icon name="MYICON"></ion-icon>

I think this step-by-step by GerritErpenstein is very intuitive, it works pretty good for me. My Ionic version is 2.2.2. Literally, you use a sentence like this and it's done:
<custom-icon set="star" name="iconostar"></custom-icon>
https://github.com/GerritErpenstein/ionic2-custom-icons

Create Icon
ion-icon {
&[class*="custom-"] {
mask-size: contain;
mask-position: 50% 50%;
mask-repeat: no-repeat;
background: currentColor;
width: 0.8em;
height: 0.8em;
}
&[class*="custom-rupee"] {
color: yellow;
mask-image: url(../../assets/Images/rupee.svg);
}
&[class*="custom-ballon"] {
mask-image: url(../../assets/ballon.svg);
}
&[class*="custom-mouse"] {
mask-image: url(../../assets/mouse.svg);
}
}
And to use them
<ion-icon name="custom-rupee"></ion-icon>
<ion-icon name="custom-mouse"></ion-icon>
<ion-icon name="custom-ballon"></ion-icon>

If ionic way is not working for you, you can work with the angular way. Use this package: https://www.npmjs.com/package/angular-svg-icon.
Sample Code for ionic usage:
<svg-icon src="/assets/icons/activity.svg"></svg-icon>

Following is the recommended way to display external svg icons using ion-icon:
To use a custom SVG, provide its url in the src attribute to request the external SVG file. The src attribute works the same as in that the url must be accessible from the webpage that's making a request for the image. Additionally, the external file can only be a valid svg and does not allow scripts or events within the svg element.
<ion-icon src="assets/icons/custom_icon.svg"></ion-icon>
Reference: https://ionic.io/ionicons/usage

tinyMCE: set padding of editor

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.