Is below the proper way to inline font declaration in head tag in nuxt.config.js. Trying to follow best practices for font loading strategies from https://web.dev/font-best-practices/. The style tag doesn't seem to be working. Can anyone help?!
link: [
{ rel: 'preconnect', href: 'https://fonts.googleapis.com' },
{ rel: 'dns-prefetch', href: 'https://fonts.gstatic.com' },
{
rel: 'preconnect',
href: 'https://fonts.gstatic.com',
crossorigin: 'anonymous',
},
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css2?family=Inter:wght#200;300;400;700&subset=latin&display=swap',
},
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
],
style: [
{
cssText:
'#font-face { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segou UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif }',
type: 'text/css',
},
{
cssText:
'body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segou UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif }',
type: 'text/css',
},
],
Related
What is the best way to set all headers in my prose class to a specific font?
The following is what I have, but does not seem to be working:
theme: {
typography: {
DEFAULT: {
css: {
h1: {
fontFamily: ['Bebas Neue', 'sans-serif'],
},
h2: {
fontFamily: ['Bebas Neue', 'sans-serif'],
},
h3: {
fontFamily: ['Bebas Neue', 'sans-serif'],
},
h4: {
fontFamily: ['Bebas Neue', 'sans-serif'],
},
h5: {
fontFamily: ['Bebas Neue', 'sans-serif'],
},
...
Also is there a less verbose way to set all headers at once?
You can use prose-headings variant or any other element modifier you need. Prose headings will target h1, h2, h3, h4, th
<div class="prose prose-headings:text-red-400">
// Content
</div>
DEMO
I have a Next.js project that uses styled-components, variables.less imported in global.less and theme object that is available globally for all components.
theme.ts fonts vars
font: {
weight: { regular: 350 },
family: {
bold: 'var(--bold-font)',
medium: 'var(--medium-font)',
light: 'var(--light-font)',
book: 'var(--book-font)',
roboto: 'Roboto, sans-serif',
},
},
variables.less
#bold-font: 'GothamRounded, Bold', Arial, sans-serif;
#medium-font: 'GothamRounded, Medium', Arial, sans-serif;
#light-font: 'GothamRounded, Light', Arial, sans-serif;
#book-font: 'GothamRounded, Book', Arial, sans-serif;
styled component
font-family: ${({ theme }) => theme.font.family.book};
the problem is that some variables work some dont, and I cannot figure out the pattern to solve the problem. The variable can be undefined randomly, #white: #fff works but #asd: #fff does not. Am I doing something wrong?
I'm trying the following style below. The issue is the actual result font-weight is no where close to the mock-up. How can I ensure I get the right style?
https://fonts.google.com/specimenTab?standard-styles#standard-styles
const LogoH1 = styled.span`
text-transform: uppercase;
font-family: 'Montserrat';
font-size: 50px;
font-weight: 900;
letter-spacing: -5px;
`
Design Tool (Adobe XD)
Result
I'm using Gatsby to connect the fonts:
plugins: [
{
resolve: `gatsby-plugin-google-fonts`,
options: {
fonts: [
`Montserrat`,
],
}
}
],
plugins: [
{
resolve: `gatsby-plugin-google-fonts`,
options: {
fonts: [
`Montserrat\:400,500,600,700,800,900`,
],
}
}],
In a Chrome extension, I'm injecting a <div> into a page which I want to style with a font that's packaged in the extension.
The font file isn't being downloaded, and is falling back to the serif option in the font stack.
Could it be related to me using a shadow DOM?
style.css:
#font-face {
font-family: 'Poppins-Medium';
font-style: normal;
font-weight: 500;
src: url('chrome-extension://__MSG_##extension_id__/poppins-medium.woff2') format('woff');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
#wrapper {
font-family: 'Poppins-Medium', sans-serif;
}
content.js
var myDiv = document.createElement('div');
myDiv.setAttribute('id', 'myContainer');
myDiv.setAttribute('style', 'all: initial;');
document.body.appendChild(myDiv);
var shadow = document.querySelector('#myContainer').attachShadow({mode: 'open'});
shadow.innerHTML = `
<div id="wrapper">
<link rel="stylesheet" href="` + chrome.runtime.getURL('style.css') + `">
<div>this text should be in poppins-medium</div>
</div>
`;
manifest.json
{
"manifest_version": 2,
"name": "My Extension",
"version": "1.0",
"description": "Blah.",
"icons": {
"128": "icon128.png"
},
"browser_action": {
"default_title": "My extension"
},
"background": {
"scripts": ["background.js"]
},
"content_scripts": [
{
"run_at": "document_end",
"matches": ["<all_urls>"],
"js": ["content.js"]
}],
"web_accessible_resources": [
"style.css",
"poppins-medium.woff2"
]
}
I'm trying to use custom fonts in a Project website with angular4.
This is my Project structure
This is my webpack.config.js
const isDevBuild = !(env && env.prod);
const sharedConfig = {
stats: { modules: false },
context: __dirname,
resolve: { extensions: [ '.js', '.ts' ] },
output: {
filename: '[name].js',
publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
},
module: {
rules: [
{ test: /\.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },
{ test: /\.html$/, use: 'html-loader?minimize=false' },
{ test: /\.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },
// Font Definitions
{ test: /\.svg$/, loader: 'url?limit=65000&mimetype=image/svg+xml&name=font/[name].[ext]' },
{ test: /\.woff$/, loader: 'url?limit=65000&mimetype=application/font-woff&name=font/[name].[ext]' },
{ test: /\.woff2$/, loader: 'url?limit=65000&mimetype=application/font-woff2&name=font/[name].[ext]' },
{ test: /\.[ot]tf$/, loader: 'url?limit=65000&mimetype=application/octet-stream&name=font/[name].[ext]' },
{ test: /\.eot$/, loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=font/[name].[ext]' }
]
},
plugins: [new CheckerPlugin()]
};
This is my css with #font-face
#font-face {
font-family: "FuturaMaxiLight";
src: url('/fonts/FuturaMaxi/Futura-Maxi-Light.eot') format('embedded-opentype'), /*for IE */
url('/fonts/FuturaMaxi/Futura-Maxi-Light.ttf') format('truetype'), /* for CSS3 browsers */
url('/fonts/FuturaMaxi/Futura-Maxi-Light.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "FuturaMaxiDemi";
src: url('/fonts/FuturaMaxi/Futura-Maxi-Demi.eot') format('embedded-opentype'), /*for IE */
url('/fonts/FuturaMaxi/Futura-Maxi-Demi.ttf') format('truetype'), /* for CSS3 browsers */
url('/fonts/FuturaMaxi/Futura-Maxi-Demi.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "FuturaMaxiBold";
src: url('/fonts/FuturaMaxi/Futura-Maxi-Bold.eot') format('embedded-opentype'), /*for IE */
url('/fonts/FuturaMaxi/Futura-Maxi-Bold.ttf') format('truetype'), /* for CSS3 browsers */
url('/fonts/FuturaMaxi/Futura-Maxi-Bold.woff') format('woff');
font-weight: normal;
font-style: normal;
}
This is the error when I try like that
If I change the css and try to include a dot before the import.
1 dot gives errors.
2 dots breaks the app.
#font-face {
font-family: "FuturaMaxiBold";
src: url('./fonts/FuturaMaxi/Futura-Maxi-Bold.eot') format('embedded-opentype'), /*for IE */
url('./fonts/FuturaMaxi/Futura-Maxi-Bold.ttf') format('truetype'), /* for CSS3 browsers */
url('./fonts/FuturaMaxi/Futura-Maxi-Bold.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Your loaders are specifying name=font/[name].[ext] and your css is looking at /fonts/FuturaMaxi/[name].[ext].
Try changing the loaders to use name=[path][name].[ext] or name=fonts/FuturaMaxi/[name].[ext]
You need resolve-url-loader to resolve the correct path in your build.
See https://github.com/bholloway/resolve-url-loader
Install resolve-url-loader
npm install --save-dev resolve-url-loader
Modify your Webpack CSS rule:
{
test: /\.css$/,
use: [
'to-string-loader',
isDevBuild ? 'css-loader' : 'css-loader?minimize',
'resolve-url-loader' // Add this
]
}
Use relative paths in your CSS files
#font-face {
font-family: "FuturaMaxiLight";
src: url('../fonts/FuturaMaxi/Futura-Maxi-Light.eot') format('embedded-opentype'), /*for IE */
url('../fonts/FuturaMaxi/Futura-Maxi-Light.ttf') format('truetype'), /* for CSS3 browsers */
url('../fonts/FuturaMaxi/Futura-Maxi-Light.woff') format('woff');
font-weight: normal;
font-style: normal;
}