Cual fuente es la que impera en CSS?
Publicado por Kathyu (30 intervenciones) el 07/07/2020 22:24:25
Tengo que modificar un Wordpress Theme, y el problema es que el font-family que este trae impera o daña ciertas cosas. Les explico con código
De esta forma la clase img-title se queda tal cual esta el theme
De esta forma la clase img-title SI cambia el font-family pero los iconos y todo lo de Font Awesome se daña.
Según entiendo el orden de las cosas predomina en CSS, y en este caso aunque yo use !important en mi clase no importa, cosa que me parece bastante raro porque con !important casi que todo se puede lograr.
Alguna idea de como puedo hacer para tener y que funcione esta fuente (que el cliente quiere) dentro de mi Wordpress theme?
De esta forma la clase img-title se queda tal cual esta el theme
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@font-face {
// Esto es lo que yo agrego
font-family: 'back-to-black';
src: url('fonts/imago/Back to Black Demo.ttf');
// Esto es lo que el tema trae en su style.css
font-family: 'FontAwesome';
src: url('../../bw/assets/fonts/font-awesome/fontawesome-webfont.eot?v=4.1.0');
src: url('../../bw/assets/fonts/font-awesome/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../../bw/assets/fonts/font-awesome/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../../bw/assets/fonts/font-awesome/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../../bw/assets/fonts/font-awesome/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
// Esto es lo que quiero cambiar
.img-title{
font-family: back-to-black !important;
text-transform: capitalize !important;
}
De esta forma la clase img-title SI cambia el font-family pero los iconos y todo lo de Font Awesome se daña.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@font-face {
// Esto es lo que el tema trae en su style.css
font-family: 'FontAwesome';
src: url('../../bw/assets/fonts/font-awesome/fontawesome-webfont.eot?v=4.1.0');
src: url('../../bw/assets/fonts/font-awesome/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../../bw/assets/fonts/font-awesome/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../../bw/assets/fonts/font-awesome/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../../bw/assets/fonts/font-awesome/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
// Esto es lo que yo agrego
font-family: 'back-to-black';
src: url('fonts/imago/Back to Black Demo.ttf');
font-weight: normal;
font-style: normal;
}
// Esto es lo que quiero cambiar
.img-title{
font-family: back-to-black !important;
text-transform: capitalize !important;
}
Según entiendo el orden de las cosas predomina en CSS, y en este caso aunque yo use !important en mi clase no importa, cosa que me parece bastante raro porque con !important casi que todo se puede lograr.
Alguna idea de como puedo hacer para tener y que funcione esta fuente (que el cliente quiere) dentro de mi Wordpress theme?
Valora esta pregunta


0