I have a stencil component that I want to set a font to.
What I have now:
index.html
<body>
<sidebar-component webpagename="dashboard"></sidebar-component>
</body>
<style>
* {
margin: 0;
font-family: Lab_Grotesque_Light;
}
#font-face {
font-family: 'Lab_Grotesque_Medium';
src: url('./assets/fonts/Lab_Grotesque_Medium.otf');
font-weight: normal;
font-style: normal;
}
</style>
This sets the font when I start my component locally.
But I want to use the component in a Vue application (imported from npm). There the custom font wont work. Is there another way to implement this.
This is covered in the docs now. You can save the font to your src folder and reference it directly. https://stenciljs.com/docs/local-assets
Update: Actually it looks like there is an issue where it is not possible to load custom fonts within a Shadow DOM https://github.com/ionic-team/stencil/issues/2072
If I put the #font-face{} in the header of the index-file. It actually worked from my other applications that uses the stencil component.
In index.html
<head>
<style type="text/css" media="screen, print">
#font-face {
font-family: "LabGrotesque-light";
src: url("../assets/font/lab-grotesque-light.otf") format("opentype");
}
</style>
</head>
You have to manually define the font face in your Vue application to make this work. Just like you did in the index.html of stencil.
If you dont want to include the font assets in you vue application you can either copy the font assets with https://stenciljs.com/docs/copy-tasks or https://docs.npmjs.com/files/package.json#files to your npm package.
Related
I want to use 2 fonts at the same time for English and Arabic characters. Haven't been able to figure out how to do it :(
These are the fonts I'm trying to use.
Arabic: https://fonts.google.com/specimen/Almarai?query=almarai
English: https://fonts.google.com/specimen/Raleway?query=raleway
On web, it would be as simple as font-family: Raleway, Almarai, sans-serif, Arial;
If anyone knows how to do it, I would really appreciate the help!!
#import url('https://fonts.googleapis.com/css2?family=Almarai&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Almarai&family=Raleway&display=swap');
body {
font-family: 'Almarai', sans-serif;
}
h2 {
font-family: 'Raleway', sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World! is in this font style and I am too!</h1>
<br>
<h2>I am styled as RALEWAY</h2>
</body>
</html>
Explanation: Google fonts provide rules to specify in CSS to import it as you do it also specifies how you use the font in this example I've demonstrated how. you use the import("font link here") to import the fonts or you could link them in the head. then you use the font-family: 'font name here' with an element {} to specify that the font is active. Then that element should be in that font.
After integrating stylus into my Vue3 application, my global css variables no longer work (loaded through prependData as mentioned here).
Old, working code (no stylus):
<style>
.item {
background-color: $bgColor;
}
</style>
New code, doesn't work (w/ stylus):
<style lang="stylus">
.item
background-color: $bgColor;
</style>
Is it possible to update my old code to leverage stylus and keep my variable structure? Thanks for your ideas.
I am new to Nuxt.
I have a page
pages/page1.vue
<template>
<h1 class="title">Page</h1>
</template>
<style>
.title {
font-size: 16px;
}
</style>
Then, under layouts I have an error.vue
layouts/error.vue
<template>
<h1 class="title">Error Page</h1>
</template>
<style>
.title {
color: red;
font-size: 18px;
}
</style>
What I found is that when page1 is rendered, the title appears in Red. I checked the inspect elements and found that the CSS of error as well as of page 1 is applied.
I do not have a default.vue in the layouts directory.
As mentioned this is my first project in Nuxt (or vue) and want to understand how to ensure that CSS of a page are applied on that page only. This is in development mode (npm run dev). Thanks
The issue is CSS without scoped attribute renders at application level. You should use scoped attribute in styles tag as
layouts/error.vue
<template>
<h1 class="title">Error Page</h1>
</template>
<style scoped>
.title {
color: red;
font-size: 18px;
}
</style>
**When a <style> tag has the scoped attribute, its CSS will apply to elements of the current component only otherwise consider global style.
I follow guide here: Vue CLI - include image from assets folder in static file
So in assets folder I have img\pic.jpg. I can call that image using normal html and css:
<img src="~#/assets/img/pic.jpg">
<style scoped>
.app {
background: url(~#/assets/img/pic.jpg);
}
</style>
But for directive (correct me if the term if wrong), I tried this and of course failed. Can you help?
<img :src="'~#/assets/'+user.profilepic">
//Note: user.profilepic = "img/pic.jpg"
could you try
<img :src="require(`#/assets/${user.profilepic}`)" />
I am using Sitefinity Stylesheet widget.When i try to apply inline style sheet inside Write CSS tab,the styles are not applied as expected
This is my code:
<style>
.menu a{
text-decoration: none;
}
.....
......
</style>
Could you please help me to figure out the issue here?
Remove the tags <style> and </style>
There is already an instruction in "Write CSS tab".