0

I'm looking at /lib/web/css/source/lib/variables/_typography.less

I was able to add a new @font-family__oswald to my own _theme.less.

Now, I'm trying to edit the h1 tags to make it all uppercase but I can't seem to get it to work. I've placed it in my _theme.less and I also tried creating a _variables_extend.less and import it into my _extend.less file like the Magento documentation.

This is what I've added:

@heading__text-transform__base: uppercase;
@h1__text-transform: @heading__text-transform__base;

I've also deleted the var folder and pub/static/frontend folder. Cleared cache as well.

What am I doing wrong?

Improve this question

1 Answer 1

Reset to default
0

Add your own font to your _theme.less in app/design/frontend/yourvendor/yourtheme/web/css/source/_theme.less

e.g by adding 

@font-face {
font-family: 'Racing Sans One';
font-style: normal;
font-weight: 400;
src: 
        local('Racing Sans One'), 
        local('RacingSansOne-Regular'), 
        url(http://really-long-url.woff) format('woff');}

then apply this font to the elements you want and add the text-transform-attribute e.g.

h1 {font-family:'Racing Sans One';text-transform: uppercase;}

in _theme.less (or any less file you import)

Then depending on the mode you run magento in (developer/production) you might need run magento setup:static-content:deployin order to make this taking affect.

I think this should do it (unless you use other styles that override yours..)

Improve this answer
1
  • Yeah that worked if I just did h1{text-transform:uppercase;}. I was hoping to keep it consistent with doing it the less way. Commented Sep 1, 2016 at 17:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.